VUE 开发——AJAX学习（一）
一、AJAX入门和axios使用
1.AJAX定义：
异步的javascript和XML，就是使用XMLHttp Request对象与服务器通信，浏览器和服务器进行数据交换的技术。
2.使用axios
- 引入axios.js：https://unpkg.com/axios/dist/axios.min.js
- 使用axios函数
-
<body> <p class="my-p"></p> <!-- 1.引入axios库 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> //2.使用axios函数 axios({ url: 'http://hmajax.itheima.net/api/province' }).then(result => { console.log(result) //控制台拿到result的省份对象 console.log(result.data.list) //拼接数组元素 console.log(result.data.list.join('<br>')) //把准备好的省份列表插入到页面 document.querySelector('.my-p').innerHTML = result.data.list.join('<br>') }) </script> </body>
效果展示：
二、认识URL
1.定义：统一资源定位符，简称网址，用于访问网络上的资源
2.组成：协议、域名、资源路径
URL：协议://域名/资源路径
http://hmajax.itheima.net/api/province
1. 协议：http
2.域名：hmajax.itheima.net
域名：标记服务器在互联网中的方位，必须添加
3.资源路径：/api/province
3.URL查询参数：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
axios查询参数
使用params选项。携带参数名和值
axios({
url: 'http://hmajax.itheima.net/api/city',
//查询参数格式
params:{
pname:'河南省'
}
}).then(result => {
console.log(result）
}
})三、常用请求方法和数据提交
请求方法：对服务器资源，要执行的操作
| 请求方法 | 操作 |
| get | 获取数据 |
| post | 提交数据 |
| put | 修改数据（全部） |
| delete | 删除数据 |
| patch | 修改数据（部分） |
axios请求配置：
url：请求的url网址
method：请求的方法，get可以省略（不区分大小写）
data：提交数据
<body>
<button class="btn">注册用户</button>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
document.querySelector('.btn').addEventListener(
'click',() => {
axios({
url: 'http://hmajax.itheima.net/api/register',
//指定请求方法
method: 'post',
//提交数据
data: {
username: 'user',
password: '123'
}
}).then(result => {
console.log(result)
})
}
)
</script>
</body>四、axios错误处理
语法：在then方法后面，通过点语法调用catch方法，传入回调函数并定义形参
axios({
url: 'http://hmajax.itheima.net/api/register',
//指定请求方法
method: 'post',
//提交数据
data: {
username: 'user',
password: '123'
}
}).then(result => {
console.log(result)
}).catch(error => {
//处理错误信息
console.log(error)
//具体错误原因
console.log(error.response.data.message)
alert(error.response.data.message)
})五、HTTP协议
1.请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容，可以在网络中查看。
请求报文——错误排查
2.响应报文：规定了浏览器发送以及服务器返回内容的格式
HTTP响应状态码：用来表明请求是否成功完成
404:服务器找不到资源
| 状态码 | 说明 |
| 1XX | 信息 |
| 2XX | 成功 |
| 3XX | 重定向信息 |
| 4XX | 客户端错误 |
| 5XX | 服务端错误 |
六、接口文档
接口文档：由后端提供的描述接口的文章
接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数
七、form-serialize使用
form-serialize插件：快速收集表单元素的值
document.querySelector('.btn').addEventListener('click',() => {
/*
参数1:要获取哪个表单的数据
参数2:配置对象
hash 设置获取数据结构 ——true：JS对象（推荐，一般请求体里提交给服务器） ； false：查询字符串
empty 设置是否获取空值
*/
const form = document.querySelector('.example-form')
const data = serialize(form,{ hash: true,empty: true})
})