4 前端前置技术（上）：AJAX技术、Axios技术（前端发送请求）

embedded/2025/2/7 9:00:38/

文章目录

  • 前言
  • 一、Ajax技术（从服务端获取数据，发送各种请求）
    • 0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试
    • 1 基本概念
    • 2 原生Ajax使用示例（几年前的早期用法）
  • 二、 Axios技术(对原生的Ajax进行了封装)
    • 1 基本概念
      • （1）Axios是什么
      • （2）常见的请求方式有哪些？
    • 2 快速入门
      • 示例1：入门案例
      • 示例2：入门案例+绑定事件
    • 3 Axios通用请求格式语法
      • 示例1：params传递参数发送get请求
      • 示例2：data传递参数发送post请求
      • 综合案例：地区查询
    • 4 axios 错误处理

前言

本课程所有接口采用apifox模拟，全部使用的是
B站-AJAX和黑马头条-数据管理平台
这个里面的接口进行测试

一、Ajax技术（从服务端获取数据，发送各种请求）

参考视频
官方文档

0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试

参考视频

  • 接口文档管理：
    • 在线
      • apipost
      • apifox
      • postman等等
    • 离线
      • word
      • md

在线的apipost这些测试工具功能很多，具体的后面不断深入学习慢慢了解这个测试工具，这个测试工具必须会用，后面无论是前端还是后端都需要频繁使用这个工具来进行测试。

下面的Ajax技术案例中的后端返回json数据都是通过这些接口工具的mock功能模拟生成的。

1 基本概念

学习本节前建议先去学习什么是GET、POST请求这些

  • 概念: Asynchronous JavaScript And XML，异步的JavaScript和XML。
    Ajax技术是一个异步交互技术，通过这个Ajax技术我们就可以从服务端获取数据
  • 作用:
    • 数据交换: 通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
    • 异步交互: 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如: 搜索联想、用户名是否可
      用的校验等等。
      在这里插入图片描述
  • 同步与异步请求区别
    • 举一个例子就好理解了
      我们在点击某些页面的时候，如果网络不好界面就会一直卡在转圈圈的界面，我们不能进行任何操作，这就是同步请求；如果我们点击某些页面就算网络不好我们还是可以操作页面，例如我们下载文件这个请求就是典型的异步请求。
  • Ajax技术就是一项发送异步请求的技术了。
    在这里插入图片描述

2 原生Ajax使用示例（几年前的早期用法）

  • 太繁琐，现在已经淘汰，了解一下
    可以使用网页版的apifox、或者apipost（个人感觉apifox更好用，界面更加清晰，apipost界面有点复杂，好多功能要摸索）生成一个get请求响应数据作为测试

  • 使用

    • （1）准备数据地址: http://hmajax.itheima.net/api/province
      示例接口文档：获取-省份列表
    • （2）创建XMLHttpRequest对象: 用于和服务器交换数据
    • （3）向服务器发送请求
    • （4）获取服务器响应数据

示例：

<body><input type="button" value="获取数据" onclick = "javascript language-javascript">getData()"><div id="div1"></div>
</body><script>javascript">function getData(){// 1 创建 XMLHttpRequest 对象var xmlHttpRequest = new XMLHttpRequest();// 2 发送异步请求xmlHttpRequest.open("GET","http://hmajax.itheima.net/api/province");xmlHttpRequest.send(); // 发送请求// 3 获取服务器响应的数据xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){      // 判断服务器是否响应成功//var data = JSON.parse(xmlHttpRequest.responseText);document.getElementById("div1").innerHTML = xmlHttpRequest.responseText;// xmlHttpRequest.responseText ：返回服务器响应的数据，以字符串形式返回}}}</script>

查看结果：
在这里插入图片描述

  • 代码解释
    • 官方文档
      在这里插入图片描述

二、 Axios技术(对原生的Ajax进行了封装)

1 基本概念

（1）Axios是什么

参考视频

  • 介绍:Axios 对原生的Ajax进行了封装，简化书写，快速开发。
  • 官网(使用文档等): https://www.axios-http.cn/
    Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

（2）常见的请求方式有哪些？

请求方法: 对服务器资源，要执行的操作
在这里插入图片描述

请求方法操作
GET获取数据
POST提交数据
PUT修改数据(全部)
DELETE删除数据
PATCH修改数据(部分)

比较常用的就是get和post请求，其余的说实话post请求好像也都能干

2 快速入门

  • step1: 引入Axios的js文件
    <script src=“https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script>

  • 使用 axios 函数发送请求，并获取响应结果
    （1）传入配置对象
    （2）再用 .then 回调函数接收结果，并做后续处理
    下面的语法，默认是get请求
    在这里插入图片描述

示例1：入门案例

参考视频

  • 需求: 请求目标资源地址，拿到省份列表数据，显示到页面
    在这里插入图片描述

  • 目标资源地址: http://hmajax.itheima.net/api/province
    接口文档说明

<body><!--axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址：http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库--><p class="my-p"></p></body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>javascript">// 2. 使用axios函数axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {console.log(result)// 好习惯：多打印，确认属性名console.log(result.data.list)console.log(result.data.list.join('<br>'))// 把准备好省份列表，插入到页面document.querySelector('.my-p').innerHTML = result.data.list.join('<br>') })</script>

结果：
在这里插入图片描述

示例2：入门案例+绑定事件

<body><!--axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址：http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库--><body><input type="button" value="获取数据" onclick = "javascript language-javascript">getData()"><div id="div1"></div></body></body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>javascript">function getData(){// 通过axios发送异步请求,默认是GET请求axios({url: "http://hmajax.itheima.net/api/province"}).then(result =>{document.getElementById("div1").innerHTML = result.data.list.join('<br>');// 通过 result.data 获取服务器返回的的JSON对象})}</script>

结果：
在这里插入图片描述

3 Axios通用请求格式语法

  • 通用请求格式语法
axios({method: 'post',        // 可以省略就是默认get请求, 大小写都可以 get\post\put\delete\patchurl: '/user/123',      // 注意 参数传递的那部分要写写到params里面去data: { ... },         // 写到这个里面的数据会直接发送出去, 例如json、xml等结构化数据都可以在这个里面发送出去params: { ... },       // 写到这个里面的请求参数会拼接到 url 中发送出去  http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
});

一般地：

  • url中要传递参数数据就写到params里面去，get,post方法可以
  • data里面可以传任何参数，特别是文件上传、json、xml等结构化数据都通过这个传，所以POST/PUT 数据会比较多
  • 误区：params只能传递get数据、data只能传POST/PUT 数据（这个结合后端的接收请求接口就好理解了）
  • 除了url，method，data，params都是可选项，根据实际情况判断是否要不要

具体的怎么发送还是要看后端接口是怎么写的
@RequestBody ：参数来源是请求体中的json等结构化数据
@RequestParam ：参数来源可以是url或者请求体的表单数据
@RequestPart：用于上传文件，参数来源是请求体中的表单数据
@PathVariable：参数来源是url中的路径变量

示例1：params传递参数发送get请求

  • 语法: 使用 axios 提供的 params 选项
  • 注意: axios 在运行时把参数名和值，会拼接到 url?参数名=值
  • 城市列表: http://hmajax.itheima.net/api/city?pname=河北省
    在这里插入图片描述
    接口文档
<body><!-- 城市列表: http://hmajax.itheima.net/api/city参数名: pname值: 省份名字--><p></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>javascript">axios({url: 'http://hmajax.itheima.net/api/city',// 查询参数params: {pname: '辽宁省'}}).then(result => {console.log(result.data.list)document.querySelector('p').innerHTML = result.data.list.join('<br>')})</script>
</body>

结果：
在这里插入图片描述

示例2：data传递参数发送post请求

参考视频

  • 需求：
    在这里插入图片描述
    接口文档
<body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>javascript">/*注册用户：http://hmajax.itheima.net/api/register请求方法：POST参数名：username：用户名（中英文和数字组成，最少8位）password：密码  （最少6位）目标：点击按钮，通过axios提交用户和密码，完成注册*/document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'POST',data: {username: 'hejuzs_01',    // 注意，重新注册用户名要修改，同样用户名不能注册两次password: 'hejuzs_01'}})})</script>
</body>

结果：
在这里插入图片描述

综合案例：地区查询

参考视频

  • 需求：在这里插入图片描述
    接口文档
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例_地区查询</title><!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> --><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><style>:root {font-size: 15px;}body {padding-top: 15px;}</style>
</head><body><div class="container"><form id="editForm" class="row"><!-- 输入省份名字 --><div class="mb-3 col"><label class="form-label">省份名字</label><input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" /></div><!-- 输入城市名字 --><div class="mb-3 col"><label class="form-label">城市名字</label><input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" /></div></form><button type="button" class="btn btn-primary sel-btn">查询</button><br><br><p>地区列表: </p><ul class="list-group"><!-- 示例地区 --><li class="list-group-item">东城区</li></ul></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>javascript">/*获取地区列表: http://hmajax.itheima.net/api/area查询参数:pname: 省份或直辖市名字cname: 城市名字*/// 目标: 根据省份和城市名字, 查询地区列表// 1. 查询按钮-点击事件document.querySelector('.sel-btn').addEventListener('click', () => {// 2. 获取省份和城市名字let p_name = document.querySelector('.province').valuelet c_name = document.querySelector('.city').value// 3. 基于axios请求地区列表数据axios({url: 'http://hmajax.itheima.net/api/area',params: {pname:p_name,cname:c_name}}).then(result => {// console.log(result)// 4. 把数据转li标签插入到页面上let list = result.data.listconsole.log(list)let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')console.log(theLi)document.querySelector('.list-group').innerHTML = theLi})})</script>
</body></html>

结果：
在这里插入图片描述

4 axios 错误处理

参考视频

  • 语法:在 then 方法的后面，通过点语法调用 catch 方法，传入回调函数并定义形参
    在这里插入图片描述

  • 处理:注册案例，重发注册时通过弹框提示用户错误原因

  • 需求：
    在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>axios错误处理</title>
</head><body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>javascript">/*注册用户: http://hmajax.itheima.net/api/register请求方法: POST参数名:username: 用户名 (中英文和数字组成, 最少8位)password: 密码 (最少6位)目标: 点击按钮, 通过axios提交用户和密码, 完成注册需求: 使用axios错误处理语法, 拿到报错信息, 弹框反馈给用户*/document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'hejuzs_01',password: 'hejuzs_01'}}).then(result => {// 成功console.log(result)}).catch(error => {      // error里面可以捕获到错误信息，如果后端的java接口抛出异常信息，返回了了一个状态码不正常的响应信息，那么就会进入到catch里面捕获到// 失败// 处理错误信息console.log(error)console.log(error.response.data.message)alert(error.response.data.message)})})</script>
</body></html>

结果：
在这里插入图片描述


http://www.ppmy.cn/embedded/160253.html

相关文章

python开发：爬虫示例——GET和POST请求处理

python开发：爬虫示例——GET和POST请求处理

一、Get请求 import json import requests#输入示例&#xff1a;urlhttps://www.baidu.com #RequestHeader:F12标头-请求标头-原始-复制到这&#xff08;忽略第一句&#xff09; def GetRequest(url,RequestHeader""):try:dic{}RequestHeaderList RequestHeader.s…
阅读更多...
中国通信企业协会 通信网络安全服务能力评定 风险评估二级要求准则

中国通信企业协会 通信网络安全服务能力评定 风险评估二级要求准则

通信网络安全服务能力评定要求是对通信网络安全服务单位的资格状况、经济实力、技术能力、服务队伍、服务过程能力等方面的具体衡量和评价。中国通信企业协会通信网络安全服务能力评定风险评估二级应达到风险评估服务一级能力要求的所有条款&#xff0c;并在以下方面增强或增加…
阅读更多...
虚拟机搭建---K8S环境

虚拟机搭建---K8S环境

K8S&#xff1a;docker容器其实本质上是一个linux里面的一个进程&#xff0c;容器本身自己是没有可再生能力的&#xff0c;没有高可用&#xff0c;而且生产环境运行容器&#xff0c;不可能只运行一两个&#xff0c;因此为了更加方便的管理众多容器&#xff0c;以及让容器具备高…
阅读更多...
DeepSeek大模型技术解析：从架构到应用的全面探索

DeepSeek大模型技术解析：从架构到应用的全面探索

一、引言 在人工智能领域&#xff0c;大模型的发展日新月异&#xff0c;其中DeepSeek大模型凭借其卓越的性能和广泛的应用场景&#xff0c;迅速成为业界的焦点。本文旨在深入剖析DeepSeek大模型的技术细节&#xff0c;从架构到应用进行全面探索&#xff0c;以期为读者提供一个…
阅读更多...
【贪心算法篇】：“贪心”之旅--算法练习题中的智慧与策略（一）

【贪心算法篇】：“贪心”之旅--算法练习题中的智慧与策略（一）

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨ 个人主页&#xff1a;余辉zmh–CSDN博客 ✨ 文章所属专栏&#xff1a;贪心算法篇–CSDN博客 文章目录 一.贪心算法1.什么是贪心算法2.贪心算法的特点 二.例题1.柠…
阅读更多...
Ruby语言的循环实现

Ruby语言的循环实现

Ruby语言的循环实现 Ruby是一种面向对象的编程语言&#xff0c;以其简洁和易读性而闻名。在Ruby中&#xff0c;循环是一种常见的控制结构&#xff0c;用于重复执行代码块&#xff0c;直到满足特定条件。通过深入研究Ruby的循环结构&#xff0c;我们可以掌握其内部机制&#xf…
阅读更多...
免费windows pdf编辑工具

免费windows pdf编辑工具

Epdf&#xff08;完全免费&#xff09; 作者&#xff1a;不染心 时间&#xff1a;2025/2/6 Github: https://github.com/dog-tired/Epdf Epdf Epdf 是一款使用 Rust 编写的 PDF 编辑器&#xff0c;目前仍在开发中。它提供了一系列实用的命令行选项&#xff0c;方便用户对 PDF …
阅读更多...
AURIX TC275学习笔记4 官方GTM例程 GTM_TOM_PWM_1

AURIX TC275学习笔记4 官方GTM例程 GTM_TOM_PWM_1

文章目录 概述其他例程 代码分析IfxGtm_enable()IfxGtm_Cmu_enableClocks&#xff08;&#xff09;IfxGtm_Tom_Pwm_initConfig&#xff08;&#xff09;IfxGtm_Tom_Pwm_init&#xff08;&#xff09;IfxGtm_Tom_Pwm_start&#xff08;&#xff09;fadeLED() 概述 目的&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023