【AJAX】让数据活起来&axios使用

目录
一、什么是AJAX？
1. 怎么用 AJAX ？
2. axios 使用
3. 熟悉 URL
4. URL 查询参数
5. 常用哀求方法
6. axios 错误处理
7. HTTP 协议－哀求报文
8. 接口文档
9. form-serialize 插件
总结不易~本章节对我有很大收获，希望对你也是~~~~

---

一、什么是AJAX？

界说：
AJAX（Asynchronous JavaScript and XML） 是一种用于在 网页与服务器之间举行异步数据通信 的技能。它允许网页在不刷新整个页面的情况下从服务器获取或发送数据，从而提高用户体验。
尽管名字中有 "XML"，但实际上 AJAX 并不局限于 XML，今世开辟中更常用 JSON（JavaScript Object Notation） 作为数据格式。
      概念：AJAX 是欣赏器与服务器举行   数据通信   的技能   
1. 怎么用 AJAX ？

   1.1.    先使用   axios   [æk‘sio  ʊ  s]   库，  与服务器举行  数据通信              基于 XMLHttpRequest 封装、代码简单、月下载量在 14 亿次              Vue、React 项目中都会用到 axios      1.2.    再学习 XMLHttpRequest 对象的使用，了解 AJAX 底层原理  
2. axios 使用

   1.   引入 axios.js：  https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js  2. 使用axios函数
           1）传入设置对象
        2）再用 .then 回调函数接收结果，并做后续处理

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

复制代码

eg1:资料自取
   需求：哀求目标资源地址，拿到省份列表数据，显示到页面  url: http://hmajax.itheima.net/api/province

   result就是可以直接返回服务器获取的布局，然后对获取的省份用join('<br>')来举行分割
  

3. 熟悉 URL

URL（Uniform Resource Locator，统一资源定位符） 是 互联网上资源的地址，用于定位网页、图片、视频等各种资源。简单来说，它就是你在欣赏器地址栏输入的网址。
   https://api.example.com/users?name=Tom&age=18
  组成部分作用https://协议（HTTP / HTTPS）api.example.com域名（服务器地址）/users资源路径?name=Tom&age=18查询参数

      协议       http 协议：超文本传输协议，规定欣赏器和服务器之间传输数据的  格式  

      域名       域名：标志服务器在互联网中  方位  

      资源路径       资源路径：标志资源在服务器下的  详细位置  

      获取 - 消息列表      需求：使用 axios 从服务器拿到消息列表数据     目标资源地址：  http://hmajax.itheima.net/api/news

1.   <div></div>
2.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
3.   <script>
4.     axios({
5.       url: 'http://hmajax.itheima.net/api/news'
6.     }).then((result) => {
7.       console.log(result)
8.       console.log(result.data)
9.       console.log(result.data.data[0])
10.       let value = result.data.data
11.       console.log(value)
12.       let arr = []
13.       for (let i = 0; i < 5; i++) {
14.         console.log(value[i].title)
15.         arr.push(value[i].title)
16.       }
17.       console.log(arr)
18.       document.querySelector('div').innerHTML = arr.join('<br>')
19.     })
20.   </script>

复制代码

4. URL 查询参数

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

    axios－查询参数-- params选项
    axios 在运行时把参数名和值，会拼接到 url  ?参数名=值    eg:   城市列表：  http://hmajax.itheima.net/api/city?pname=河北省

1. axios({
2. url: 'http://hmajax.itheima.net/api/city',
3. params: {
4.     pname: '河北省'
5. }
6. }).then(result => {
7.     // 对服务器返回的数据做后续处理
8. })

复制代码

      地域查询      需求：根据输入的省份名字和城市名字，查询地域并渲染列表  

在 axios 里，params 选项用于拼接 URL 查询参数，它是一个对象（Object），其完备写法如下： 

1.        params: {
2.           pname: pname, // 传递字符串
3.           cname: cname
4.         }

复制代码

• params 里的键值对是 键（Key）和值（Value） 的映射关系（类似 hash 映射）。
  
• 键：pname 和 cname 是哀求的参数名称，它们会主动添加到 URL 的查询参数中。
  
• 值：pname 和 cname 变量存储的是 input 输入框的值，它们将被看成字符串传递到服务器。
  

因为 对象的键和值雷同时，可以省略值的重复写法。
   params: { pname, cname }

1.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
2.   <script>
3.     /*
4.       获取地区列表: http://hmajax.itheima.net/api/area
5.       查询参数:
6.         pname: 省份或直辖市名字
7.         cname: 城市名字
8.     */
10.     let btn = document.querySelector('.btn')
11.     btn.addEventListener('click', function () {
12.       let pname = document.querySelector('.province').value
13.       let cname = document.querySelector('.city').value
15.       console.log(pname)
17.       axios({
18.         url: 'http://hmajax.itheima.net/api/area',
19.         params: {
20.           pname, // 传递字符串
21.           cname
22.         }
23.       }).then(result => {
24.         console.log(result)
25.         let list = result.data.list
26.         console.log(list)
27.         let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')
28.         console.log(theLi)
29.         document.querySelector('.list-group').innerHTML = theLi
30.       })
32.     })
33. </script>

复制代码

5. 常用哀求方法

   哀求方法：对服务器  资源  ，要执行的  操纵  方法作用示例GET获取资源axios.get(url)POST提交数据axios.post(url, data)PUT更新资源axios.put(url, data)DELETE删除资源axios.delete(url)
      1. 哀求方法表明对服务器资源的操纵，   最为常用   的2个是？          POST   提交数据，  GET   查询数据 ，通常get就是axios的默认设置         2. axios 的核心设置？     

•        url：哀求 URL 网址
  
•        method    ：哀求方法，    GET     可以省略（不区分大小写）
  
•        params：查询参数
  
•        data    ：提交数据
  

如图很好明白：

6. axios 错误处理

      在    then    方法的后面，通过点语法调用    catch    方法，传入   回调函数   并界说   形参      很好明白就是多了一个catch()方法

1.     document.querySelector('.btn').addEventListener('click', () => {
2.       axios({
3.         url: 'http://hmajax.itheima.net/api/register',
4.         // 指定请求方法
5.         method: 'post',
6.         data: {
7.           username: 'itheima007',
8.           password: '7654321'
9.         }
10.       }).then(result => {
11.         console.log(result)
12.       }).catch(error => {
13.         console.log(error)
14.         alert(error.response.data.message)
15.       })
16.     })

复制代码

7. HTTP 协议－哀求报文

   HTTP 协议：规定了欣赏器发送及服务器返回内容的  格式     哀求报文  ：欣赏器按照 HTTP 协议要求的  格式  ，发送给服务器的  内容  
   1）哀求报文的组成部分有:   

•  哀求行：哀求方法，URL，协议
  
• 哀求头：以键值对的格式携带的附加信息，比如：Content-Type
  
•  空行：分隔哀求头，空行之后的是发送给服务器的资源
  
• 哀求体：发送的资源
  

2）通过 Chrome 的网络面板查看哀求报文

      HTTP 协议－相应报文      HTTP 协议：规定了欣赏器发送及服务器返回内容的  格式     相应报文  ：服务器按照 HTTP 协议要求的  格式  ，  返回给欣赏器的  内容   

• 相应行（状态行）：协议、HTTP 相应状态码、状态信息
  
• 相应头：以键值对的格式携带的附加信息，比如：Content-Type
  
• 空行：分隔相应头，空行之后的是服务器返回的资源
  
• 相应体：返回的资源
  

  

      HTTP 相应状态码      HTTP 相应状态码：用来表明哀求  是否成功  完成 。  比如：  404（服务器找不到资源）  状态码寄义200 OK哀求成功201 Created资源已创建204 No Content哀求成功但无返回301 Moved Permanently永世重定向302 Found暂时重定向304 Not Modified资源未修改，可使用缓存400 Bad Request哀求错误401 Unauthorized未授权（必要登录或 token）403 Forbidden禁止访问404 Not Found资源不存在500 Internal Server Error服务器内部错误502 Bad Gateway网关错误503 Service Unavailable服务器暂时不可用

8. 接口文档

   传送门  ：  AJAX接口文档    由  后端  提供的  形貌接口  的文章  

      案例－用户登录   

• 点击登录时，判定用户名和密码长度
  
• 提交数据和服务器通信
  
• 提示信息
  
  
  
• 第一步就是获取点击事故，再判定用户名和密码的长度
  
• 通过就举行axois举行数据提交和错误接收
  
• 末了创建一个函数alertFn() 通过传入参数msg 文字提示信息 和 是否登录成功的判定isSuccess来决定该显示框的颜色
  

这里保举一个超好用的网址：https://v5.bootcss.com/docs/getting-started/introduction/
 可以举行多种方法的文档查询

   通过引入bootstrap后就可以直接使用该方法，只必要对该div举行添加该class命名即可：

1.   <!-- 引入bootstrap.css -->
2.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

复制代码

 

1.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
2.   <script>
3.     // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
4.     // 目标2：使用提示框，反馈提示消息
6.     const Alert = document.querySelector('.alert')
7.     // 2.2 封装提示框函数 重复调用 满足提示需求
8.     // 功能：
9.     // 1. 显示提示框
10.     // 2. 不同提示文字msg 和成功绿色失败红色isSuccess
11.     // 3. 过2秒后，让提示框自动消失
13.     function alertFn(msg, isSuccess) {
14.       // 1. 显示提示框
15.       Alert.classList.add('show')
17.       // 2. 接收文字和显示颜色
18.       const text = isSuccess ? 'alert-success' : 'alert-danger'
19.       Alert.innerHTML = msg
20.       Alert.classList.add(text)
22.       // 3. 2秒后消失
23.       setTimeout(() => {
24.         Alert.classList.remove('show')
25.         Alert.classList.remove(text)
26.       }, 2000)
28.     }
32.     // 1.1 登录-点击事件
33.     document.querySelector('.btn-login').addEventListener('click', () => {
34.       // 1.2 获取用户名和密码
35.       const username = document.querySelector('.username').value
36.       const password = document.querySelector('.password').value
37.       // console.log(username, password)
39.       // 1.3 判断长度
40.       if (username.length < 8) {
41.         alertFn('用户名必须大于等于8位', false)
42.         console.log('用户名必须大于等于8位')
43.         return // 阻止代码继续执行
44.       }
45.       if (password.length < 6) {
46.         alertFn('密码必须大于等于6位', false)
47.         console.log('密码必须大于等于6位')
48.         return // 阻止代码继续执行
49.       }
51.       // 1.4 基于axios提交用户名和密码
52.       // console.log('提交数据到服务器')
53.       axios({
54.         url: 'http://hmajax.itheima.net/api/login',
55.         method: 'POST',
56.         data: {
57.           username,
58.           password
59.         }
60.       }).then(result => {
61.         alertFn(result.data.message, true)
62.         console.log(result)
63.         console.log(result.data.message)
64.       }).catch(error => {
65.         alertFn(error.response.data.message, false)
66.         console.log(error)
67.         console.log(error.response.data.message)
68.       })
69.     })
70.   </script>

复制代码

9. form-serialize 插件

作用：快速获取表单数据并转换为对象。
用法：

1. const form = document.querySelector('.example-form')
2. const data = serialize(form, { hash: true, empty: true })

复制代码

 

1. <body>
2.   <form action="javascript:;" class="example-form">
3.     <input type="text" name="uname">
4.     <br>
5.     <input type="text" name="pwd">
6.     <br>
7.     <input type="button" class="btn" value="提交">
8.   </form>
9.   <!--
10.     目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
11.   -->
12.   <!-- 1. 把插件引入到自己的网页代码中 -->
13.   <script src="./lib/form-serialize.js"></script>
14.   <script>
15.     document.querySelector('.btn').addEventListener('click', () => {
16.       //  2. 使用serialize函数 快速收集表单元素的值
17.       // 参数1 要获取哪个表单的数据
18.       // 表单元素设置name属性 值会作为对象的属性名  
19.       // 参数2 配置对象
20.       // hash 设置获取数据结构
21.       // - true JS对象（推荐） 一般请求体里提交给服务器
22.       // - false 查询字符串
23.       // empty 设置是否获取空值
24.       // - true 获取空值（推荐） 数据结构和标签结构一致
25.       // - false 不获取空值
27.       const form = document.querySelector('.example-form')
28.       const data = serialize(form, { hash: true, empty: true })
29.       // const data = serialize(form, { hash: false, empty: true })
30.       // const data = serialize(form, { hash: true, empty: false })
31.       console.log(data)
33.     })
34.   </script>
35. </body>

复制代码

解包，快速获得多个表单数据：

1.       // 设置表单 name属性的值
2.       const form = document.querySelector('.login-form')
3.       console.log(form)
4.       const data = serialize(form, { hash: true, empty: true })
5.       console.log(data)
8.       // 1.2 获取用户名和密码
9.       // const username = document.querySelector('.username').value
10.       // const password = document.querySelector('.password').value
11.       // console.log(username, password)
13.       // 解包
14.       // const { username, password } = data
15.       const { username: username, password: password } = data

复制代码

总结不易~本章节对我有很大收获，希望对你也是~~~~




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。