AJAX 1------axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件
1.AJAX入门与体验axios
-
定义 ：浏览器与服务器进行数据通信的技术
-
体验axios库，与服务器通信
- 引入axios.js
- 使用axios函数
js<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查询参数
-
浏览器提供给服务器额外的信息，让服务器返回浏览器想要的数据
-
使用params选项，axios在运行时会把参数名和值拼接到url?参数名=值
js<!-- 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>') })
-
-
案例：地区查询（通过多个参数查询）
html<!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/[email protected]/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]').value const city = document.querySelector('[name=city]').value axios({ 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：提交数据
jsdocument.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方法，传入回调函数并定义形参
jsdocument.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 服务器错误
-
6.接口文档
-
定义 ：后端 提供的描述接口的文档，接口就是使用AJAX和服务器通讯时，使用的URL，请求方法以及参数
-
登录注册案例：(注意这里的服务器及接口是别人的，可以自己写)
- 注册：这里的注册没有使用输入框数据,直接通过代码发送的
js<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> -
登录：和前面注册用的服务器是同一个，所以上面注册的信息可以登陆成功
js<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/[email protected]/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 = msg const 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').value const 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插件
- 作用：快速收集表单元素的值
js
<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>