当前位置：首页 > news >正文

AJAX 异步请求

news 2026/3/26 18:52:29

一、Axios GET 请求（超链接点击事件）

document.getElementById("link1").onclick = function (e) {// 1. 抑制元素默认行为e.preventDefault(); //抑制默认行为// window.location.href = "/page22";// 页面跳转到page22console.log("你点击了link1"); // 调试打印// 2. 封装AJAX请求参数let data = {id: 114514,name: "admin"}// 3. 发起AJAX GET请求axios.get("/link2", {params: data}).then(function (resp) { // 4. 请求成功的回调处理console.log(resp.data); // 打印后端返回的核心业务数据console.log(resp); // 打印完整的Axios响应对象// 局部更新页面：修改超链接的文本内容document.getElementById("link1").innerText = resp.data.name + ":" + resp.data.id;// 条件判断：后端返回id则跳转到指定页面if (resp.data.id) {window.location.href = "/page22";// 页面跳转到page22}}).catch(function (erro) { // 5. 请求失败的错误处理console.log(erro); // 打印错误信息，用于调试});
}

事件绑定：onclick
document.getElementById("link1").onclick = function (e) {}：为超链接绑定事件
事件对象 e 和核心方法 e.preventDefault()
回调函数的第一个参数 e 是事件对象，包含当前事件的所有信息
e.preventDefault():抑制元素的默认行为
超链接的默认行为：点击后跳转到 href 指定的地址（# 是当前页面的顶部），若不抑制，会中断 AJAX 请求，执行跳转；

作用：阻止默认的同步交互行为，使 AJAX 异步请求能够发生

参数封装请求

将需要传递给后端的参数封装为 JS 的普通对象

Axios GET 请求语法：axios.get(url, { params: 数据对象})

url：后端接口地址（前端发起请求的目标地址）

{ params: 数据对象 }：GET 请求传参的核心配置

params 属性：Axios 会自动将 JS 对象 data 转为 URL 查询参数，拼接在接口地址后

异步请求处理： then()/catch()

`then(function (resp) {})`：请求成功时执行的回调函数，参数 resp 是 Axios 封装的响应对象

`resp.data`：后端返回的实际业务数据（如 JSON 对象 {name: "admin", id: 114514}），Axios 会自动将后端返回的 JSON 字符串解析为 JS 对象

`catch(function (erro) {})`：请求失败时执行的回调函数，参数 erro 是错误对象，包含错误原因

修改元素文本 `innerText`

`innerText`：获取/修改元素的纯文本内容，不会解析 HTML 标签

作用：无刷新局部更新页面，仅修改超链接的文本，页面其他部分不变

页面跳转：`window.location.href`

通过 JS 实现浏览器页面重定向，跳转到指定后端页面

二、Axios POST 请求（表单提交事件）

document.getElementById("form2").onsubmit = function (e) {// 1. 抑制表单默认提交行为e.preventDefault(); //抑制默认行为console.log("你提交了form2"); // 调试打印console.log(e.target.action); // 打印表单的action属性值（/form2）// 2. 前端表单非空验证if (!document.getElementById("username").value) {console.log("请输入用户名");return;}if (!document.getElementById("password").value) {console.log("请输入密码");return;}// 3. 封装表单提交参数let data = {username: document.getElementById("username").value,password: document.getElementById("password").value}// 4. 发起AJAX POST请求axios.post(e.target.action, data, {headers: {"Content-Type": "application/json"}}).then(function (resp) { // 5. 请求成功的回调处理console.log(resp); // 打印响应对象// 局部更新输入框内容，实现数据回显document.getElementById("username").value = "1" + resp.data.username;document.getElementById("password").value = "2" + resp.data.password;}).catch(function (erro) { // 6. 请求失败的错误处理console.log(erro); // 打印错误信息});
}

表单提交事件：onsubmit
document.getElementById("form2").onsubmit = function (e) {}：为表单绑定提交事件，点击表单内的<input type="submit">按扭时会触发该事件
与超链接同理，通过e.preventDefault()抑制表单的默认提交行为：表单默认会按 action 地址和 method 方式发起同步 POST 请求，并整页刷新，输入框内容会清空
事件源获取属性：e.target.action
e.target：表示触发事件的原始元素
e.target.action：动态获取表单 action 属性值（/form2），作为 POST 请求的接口地址
表单非空验证

if (!document.getElementById("username").value) {console.log("请输入用户名");return;
}
if (!document.getElementById("password").value) {console.log("请输入密码");return;
}

封装表单参数：获取用户输入值

let data = {username: document.getElementById("username").value,password: document.getElementById("password").value
}

通过`value`获取用户名和密码的实际输入值，封装为 JS 对象`data`，这是需要传递给后端的核心业务参数，后续应作为 POST 请求的请求体数据传递。

Axios POST 请求语法：axios.post(接口地址, 请求体数据, 配置对象)
请求头配置：Content-Type: application/json

haders: {"Content-Type": "application/json"}：告诉后端"本次请求的请求体数据格式是 JSON 字符串，按照 JSON 格式解析参数"
若第二个参数是 JS 对象，Axios 会自动将其转为 JSON 字符串

请求成功局部更新

document.getElementById("username").value = "1" + resp.data.username;
document.getElementById("password").value = "2" + resp.data.password;

再次通过value属性修改输入框的内容，实现无刷新数据回显—— 后端返回数据后，仅更新两个输入框的内容，页面其他部分完全不变

三、整体代码执行流程总结

超链接link1点击流程

用户点击link1 → 抑制默认跳转 → 封装参数data → Axios 发起 GET 请求/link2?id=114514&name=admin → 后端处理并返回 JSON 数据 → 请求成功则修改 link1 文本 → 有返回 id 则跳转到 /page22 → 请求失败则打印错误。