AJAX 1——axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件

1.AJAX入门与体验axios

定义：浏览器与服务器进行数据通信的技术

体验axios库，与服务器通信

引入axios.js
使用axios函数

<p class="my-p"></p><!-- 1.引入axios库 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 2.使用axios函数axios({url: 'http://ajax-api.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>')})

2.认识URL

URL定义：统一资源定位符，简称网址，因特网上标准的资源的地址
URL组成：协议://域名/资源路径
- 协议：规定浏览器与服务器之间传输数据的格式
- 域名：标记服务器在互联网的方位
- 资源路径：标记资源在服务器下的具体路径

URL查询参数

浏览器提供给服务器额外的信息，让服务器返回浏览器想要的数据
语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

使用params选项，axios在运行时会把参数名和值拼接到url?参数名=值

<!-- 1.引入axios库 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 2.使用axios函数axios({url: 'http://hmajax.itheima.net/api/city',params: {pname: '陕西省'}}).then(result => {document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')})

案例：地区查询（通过多个参数查询）

<!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>04.案例_地区查询</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/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>/*获取地区列表: 查询参数:pname: 省份或直辖市名字cname: 城市名字*/const button = document.querySelector('button')button.addEventListener('click', function () {const list = document.querySelector('.list-group')const province = document.querySelector('[name=province]').valueconst city = document.querySelector('[name=city]').valueaxios({url: 'http://hmajax.itheima.net/api/area',params: {pname: province,cname: city}}).then(result => {// list.removeChild(document.querySelectorAll('.list-group-item'))console.log(result)const lists = result.data.list.map(function (item) {return `<li class="list-group-item">${item}</li>`}).join('')list.innerHTML = lists})})</script>
</body></html>

3.常用请求方法

Get：获取数据(默认)

POST：提交数据

 document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'xxg213421',password: '1233432'}}).then(result => {console.log(result)})})

PUT：修改数据
DELETE：删除数据
PATCH：修改数据（部分）
axios请求配置：
- url：请求的URL网址
- method：请求的方法，GET可以省略
- data：提交的数据

4.axios错误处理

在then方法后面，通过点语法调用catch方法，传入回调函数并定义形参

document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'xxg213421',password: '1233432'}}).then(result => {console.log(result)}).catch(error => {  //处理错误信息console.log(error.response.data.message)alert(error.response.data.message)})})

5.HTTP协议

HTTP协议：规定了浏览器发送及服务器返回内容的格式
请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容
- 组成部分4个：
  - 请求行：请求方法，URL，协议
  - 请求头：以键值对的格式携带的附加信息，eg:Content-Type
  - 空行：分隔请求头与请求体
  - 请求体：发送的资源
- 怎么在浏览器中查看：右键检查——>网络——>Fetch/XHR——>选择某次想要看的信息进行查看
- 通过请求报文进行错误排查——去看报文中的载荷，以及响应结果
响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的格式
- 组成部分4个：
  - 响应行：协议，HTTP响应状态码，状态信息
  - 响应头：以键值对的格式携带的附加信息，eg:Content-Type
  - 空行：分隔响应头和响应体
  - 响应体：返回的资源
- HTTP响应状态码：
  
  状态码说明
  1XX 信息
  2XX 成功
  3XX 重定向消息
  4XX 客户端错误（浏览器）
  5XX 服务器错误

状态码	说明
1XX	信息
2XX	成功
3XX	重定向消息
4XX	客户端错误（浏览器）
5XX	服务器错误

6.接口文档

定义：后端提供的描述接口的文档，接口就是使用AJAX和服务器通讯时，使用的URL，请求方法以及参数

登录注册案例：(注意这里的服务器及接口是别人的，可以自己写)

<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: 'lyq20040110',password: '20040110'}}).then(result => {console.log(result)}).catch(error => {  //处理错误信息console.log(error.response.data.message)alert(error.response.data.message)})})</script>

<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>12.案例_登录_提示消息</title><!-- 引入bootstrap.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"><!-- 公共 --><style>html,body {background-color: #EDF0F5;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.container {width: 520px;height: 540px;background-color: #fff;padding: 60px;box-sizing: border-box;}.container h3 {font-weight: 900;}</style><!-- 表单容器和内容 --><style>.form_wrap {color: #8B929D !important;}.form-text {color: #8B929D !important;}</style><!-- 提示框样式 --><style>.alert {transition: .5s;opacity: 0;}.alert.show {opacity: 1;}</style>
</head><body><div class="container"><h3>欢迎-登录</h3><!-- 登录结果-提示框 --><div class="alert alert-success" role="alert">提示消息</div><!-- 表单 --><div class="form_wrap"><form><div class="mb-3"><label for="username" class="form-label">账号名</label><input type="text" class="form-control username"></div><div class="mb-3"><label for="password" class="form-label">密码</label><input type="password" class="form-control password"></div><button type="button" class="btn btn-primary btn-login"> 登 录 </button></form></div></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信// 目标2：使用提示框，反馈提示消息//获取提示框//功能：//1.显示提示框//2.不同提示文字，成功绿色不成功红色//3.两秒后自动消失const myAlert = document.querySelector('.alert')function alertFn(isSuccess, msg) {myAlert.classList.add('show')myAlert.innerHTML = msgconst bgStyle = isSuccess ? 'alert-success' : 'alert-danger'myAlert.classList.add(bgStyle)setTimeout(() => {myAlert.classList.remove('show')//重置背景色myAlert.classList.remove(bgStyle)}, 2000)}// 1.1 登录-点击事件document.querySelector('.btn-login').addEventListener('click', () => {// 1.2 获取用户名和密码const username = document.querySelector('.username').valueconst password = document.querySelector('.password').value// console.log(username, password)// 1.3 判断长度if (username.length < 8) {console.log('用户名必须大于等于8位')alertFn(false, '用户名必须大于等于8位')return // 阻止代码继续执行}if (password.length < 6) {console.log('密码必须大于等于6位')alertFn(false, '密码必须大于等于6位')return // 阻止代码继续执行}// 1.4 基于axios提交用户名和密码// console.log('提交数据到服务器')axios({url: 'http://hmajax.itheima.net/api/login',method: 'POST',data: {username,password}}).then(result => {console.log(result)console.log(result.data.message)alertFn(true, '登陆成功')}).catch(error => {console.log(error)console.log(error.response.data.message)alertFn(false, '用户名或密码不正确')})})</script>
</body>
</html>

7.form-serialize插件

作用：快速收集表单元素的值

<body><form action="javascript:;" class="example-form"><input type="text" name="uname"><br><input type="text" name="pwd"><br><input type="button" class="btn" value="提交"></form><!-- 目标：在点击提交时，使用form-serialize插件，快速收集表单元素值--><!-- 引入插件 --><script src="./form-serialize.js"></script><script>document.querySelector('.btn').addEventListener('click', () => {// 使用serialize函数const form = document.querySelector('.example-form')//参数1：获取哪个表单参数 //**表单属性要设置name值，值会作为对象的属性名//**建议name属性的值和接口文档参数名一致 //参数2：配置对象//**hash:设置获取的数据结构——推荐为true//****true:JS对象//****false:查询字符串——推荐为true//**empty:是否获取空值const data = serialize(form, { hash: true, empty: true })console.log(data)})</script>
</body>
</html>