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

Ajax从零到实战

news 2025/7/8 19:58:47

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

前言

本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习Ajax的过程，俗话说，好记性不如烂笔头，小郑喜欢在学习的过程中记笔记，记下自己在学习过程中难以理解的知识点，反复练习，加深印象，小郑打算在这个暑假的第一个月学习完Ajax从0到1实现项目，希望广大网友一起监督学习，互相进步!

什么是 AJAX ?

引入 axios.js 文件到自己的网页中

URL 查询参数

1. 查询参数的语法

2. axios 如何携带查询参数?

查询地区列表案例

axios错误处理

请求报文--错误排查

form-serialize 插件

什么是 AJAX ?

使用浏览器的 XMLHttpRequest 对象与服务器通信
浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页

引入 axios.js 文件到自己的网页中

axios.js文件链接:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

axios函数的使用语法

axios({url: '目标资源地址'
}).then((result) => {// 对服务器返回的数据做后续处理
})

URL 查询参数

1. 查询参数的语法

在 url 网址后面用?拼接格式：XXXX?参数名1=值1&参数名2=值2
参数名一般是后端规定的，值前端看情况传递即可

2. axios 如何携带查询参数?

查询城市列表的 url地址：http://hmajax.itheima.net/api/city

axios({url: '目标资源地址',params: {参数名: 值}
}).then(result => {// 对服务器返回的数据做后续处理
})

查询地区列表案例

查询地区: http://hmajax.itheima.net/api/area

/*获取地区列表: http://hmajax.itheima.net/api/area查询参数:pname: 省份或直辖市名字cname: 城市名字*/
// 目标: 根据省份和城市名字, 查询地区列表
// 1. 查询按钮-点击事件
document.querySelector('.sel-btn').addEventListener('click', () => {// 2. 获取省份和城市名字let pname = document.querySelector('.province').valuelet cname = document.querySelector('.city').value// 3. 基于axios请求地区列表数据axios({url: 'http://hmajax.itheima.net/api/area',params: {pname,cname}}).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})
})

axios错误处理

当用户已经注册过，再次点击注册按钮的时候，就会报错，那么我们要怎么处理呢?

<!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>
</head><body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注册用户：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: '大学生小郑123',password: '7654321'}}).then(result => {console.log(result)}).catch(error => {console.log(error.response.data.message)alert(error.response.data.message)})})</script>
</body></html>

请求报文--错误排查

当我点击登录的时候，发现密码错误，那么我们要怎么排查错误呢?

流程：

1.确认信息是否在请求报文正确携带

2.发现密码错误返回到代码查看

form-serialize 插件

使用serialize函数，快速收集表单元素的值

* 参数1：要获取哪个表单的数据

* 表单元素设置name属性，值会作为对象的属性名

* 建议name属性的值，最好和接口文档参数名一致

* 参数2：配置对象

* hash 设置获取数据结构

* - true：JS对象（推荐）一般请求体里提交给服务器

* - false: 查询字符串

* empty 设置是否获取空值

* - true: 获取空值（推荐）数据结构和标签结构一致

* - false：不获取空值

<script src="./lib/form-serialize.js"></script><script>document.querySelector('.btn').addEventListener('click', () => {const form = document.querySelector('.example-form')const data = serialize(form, { hash: true, empty: true })// const data = serialize(form, { hash: false, empty: true })// const data = serialize(form, { hash: true, empty: false })console.log(data)})</script>