IOS【AJAX】让数据活起来&axios使用 - Powered by Discuz! Archiver

忿忿的泥巴坨 发表于 2025-3-22 03:55:20

【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.js2. 使用axios函数
   1）传入设置对象
2）再用 .then 回调函数接收结果，并做后续处理
axios({
url: '目标资源地址'
}).then((result) => {
// 对服务器返回的数据做后续处理
})
eg1:资料自取
需求：哀求目标资源地址，拿到省份列表数据，显示到页面url: http://hmajax.itheima.net/api/province
https://i-blog.csdnimg.cn/direct/693894bf1aa34c96a46f60fe6b8ab581.png
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查询参数
https://i-blog.csdnimg.cn/direct/a16e82ff48144f03b6780dbf66b7b10c.png

   协议    http 协议：超文本传输协议，规定欣赏器和服务器之间传输数据的格式https://i-blog.csdnimg.cn/direct/0a164246fcbd4945b2e6656d8a3c9e45.png
https://i-blog.csdnimg.cn/direct/90a91c1355884742bf699a8e5225a40e.png

   域名    域名：标志服务器在互联网中方位https://i-blog.csdnimg.cn/direct/66a1c27c8a414d81a71ed71f1564887f.png

   资源路径    资源路径：标志资源在服务器下的详细位置https://i-blog.csdnimg.cn/direct/d310036baae24b0c993bcdfd8eb302cf.png

   获取 - 消息列表    需求：使用 axios 从服务器拿到消息列表数据目标资源地址：http://hmajax.itheima.net/api/news<div></div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
   url: 'http://hmajax.itheima.net/api/news'
}).then((result) => {
   console.log(result)
   console.log(result.data)
   console.log(result.data.data)
   let value = result.data.data
   console.log(value)
   let arr = []
   for (let i = 0; i < 5; i++) {
   console.log(value.title)
   arr.push(value.title)
   }
   console.log(arr)
   document.querySelector('div').innerHTML = arr.join('<br>')
})
</script> https://i-blog.csdnimg.cn/direct/229ec2ee8430415589f6ea274349e3b0.png

4. URL 查询参数

界说：欣赏器提供给服务器的额外信息，让服务器返回欣赏器想要的数据
语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
https://i-blog.csdnimg.cn/direct/dbc36487f52c4f70a063f360c55ed043.png
  axios－查询参数-- params选项
axios 在运行时把参数名和值，会拼接到 url?参数名=值 eg: 城市列表：http://hmajax.itheima.net/api/city?pname=河北省axios({
url: 'http://hmajax.itheima.net/api/city',
params: {
pname: '河北省'
}
}).then(result => {
// 对服务器返回的数据做后续处理
})

   地域查询    需求：根据输入的省份名字和城市名字，查询地域并渲染列表https://i-blog.csdnimg.cn/direct/a6e54c705bde42a982920118eed81402.png
在 axios 里，params 选项用于拼接 URL 查询参数，它是一个对象（Object），其完备写法如下：
   params: {
      pname: pname, // 传递字符串
      cname: cname
   }

[*]params 里的键值对是键（Key）和值（Value）的映射关系（类似 hash 映射）。
[*]键：pname 和 cname 是哀求的参数名称，它们会主动添加到 URL 的查询参数中。
[*]值：pname 和 cname 变量存储的是 input 输入框的值，它们将被看成字符串传递到服务器。
因为对象的键和值雷同时，可以省略值的重复写法。
params: { pname, cname }
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/*
   获取地区列表: http://hmajax.itheima.net/api/area
   查询参数:
   pname: 省份或直辖市名字
   cname: 城市名字
*/

let btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
   let pname = document.querySelector('.province').value
   let cname = document.querySelector('.city').value

   console.log(pname)

   axios({
   url: 'http://hmajax.itheima.net/api/area',
   params: {
      pname, // 传递字符串
      cname
   }
   }).then(result => {
   console.log(result)
   let list = result.data.list
   console.log(list)
   let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')
   console.log(theLi)
   document.querySelector('.list-group').innerHTML = theLi
   })

})
</script> https://i-blog.csdnimg.cn/direct/775f5c214c4d4857908f8d512d619203.png

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 ：提交数据
如图很好明白：
https://i-blog.csdnimg.cn/direct/eb8321283a5f43de9101e36fe4b381f6.png

6. axios 错误处理

   在 then 方法的后面，通过点语法调用 catch 方法，传入回调函数并界说形参    很好明白就是多了一个catch()方法 document.querySelector('.btn').addEventListener('click', () => {
   axios({
   url: 'http://hmajax.itheima.net/api/register',
   // 指定请求方法
   method: 'post',
   data: {
      username: 'itheima007',
      password: '7654321'
   }
   }).then(result => {
   console.log(result)
   }).catch(error => {
   console.log(error)
   alert(error.response.data.message)
   })
}) https://i-blog.csdnimg.cn/direct/80b7f02284d24168a6e1218a908550e8.png

7. HTTP 协议－哀求报文

HTTP 协议：规定了欣赏器发送及服务器返回内容的格式哀求报文：欣赏器按照 HTTP 协议要求的格式，发送给服务器的内容
1）哀求报文的组成部分有:
[*] 哀求行：哀求方法，URL，协议
[*]哀求头：以键值对的格式携带的附加信息，比如：Content-Type
[*] 空行：分隔哀求头，空行之后的是发送给服务器的资源
[*]哀求体：发送的资源
https://i-blog.csdnimg.cn/direct/b3e4d08a25ad46ba9100f1413f7969e2.png
2）通过 Chrome 的网络面板查看哀求报文
https://i-blog.csdnimg.cn/direct/a51660b1a11347aaa8194182d9ea6b42.png

   HTTP 协议－相应报文    HTTP 协议：规定了欣赏器发送及服务器返回内容的格式相应报文：服务器按照 HTTP 协议要求的格式，返回给欣赏器的内容
[*]相应行（状态行）：协议、HTTP 相应状态码、状态信息
[*]相应头：以键值对的格式携带的附加信息，比如：Content-Type
[*]空行：分隔相应头，空行之后的是服务器返回的资源
[*]相应体：返回的资源
https://i-blog.csdnimg.cn/direct/f8c82582f0fa49ee83e0f7a94ba88230.png

   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接口文档由后端提供的形貌接口的文章https://i-blog.csdnimg.cn/direct/a8bfb5f79f014911a2046e065fccd692.png

   案例－用户登录
[*]点击登录时，判定用户名和密码长度
[*]提交数据和服务器通信
[*]提示信息https://i-blog.csdnimg.cn/direct/3eda5a2a7f1d4bc4b64aa4e5bf1a6b11.png
[*]第一步就是获取点击事故，再判定用户名和密码的长度
[*]通过就举行axois举行数据提交和错误接收
[*]末了创建一个函数alertFn() 通过传入参数msg 文字提示信息和是否登录成功的判定isSuccess来决定该显示框的颜色
这里保举一个超好用的网址：https://v5.bootcss.com/docs/getting-started/introduction/
可以举行多种方法的文档查询https://i-blog.csdnimg.cn/direct/d0acbf0e82794099bd01200b9484d95b.png
通过引入bootstrap后就可以直接使用该方法，只必要对该div举行添加该class命名即可：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> https://i-blog.csdnimg.cn/direct/d8db037b97b7444ab6bf991bc1c3a5c8.png

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
// 目标2：使用提示框，反馈提示消息

const Alert = document.querySelector('.alert')
// 2.2 封装提示框函数重复调用满足提示需求
// 功能：
// 1. 显示提示框
// 2. 不同提示文字msg 和成功绿色失败红色isSuccess
// 3. 过2秒后，让提示框自动消失

function alertFn(msg, isSuccess) {
   // 1. 显示提示框
   Alert.classList.add('show')

   // 2. 接收文字和显示颜色
   const text = isSuccess ? 'alert-success' : 'alert-danger'
   Alert.innerHTML = msg
   Alert.classList.add(text)

   // 3. 2秒后消失
   setTimeout(() => {
   Alert.classList.remove('show')
   Alert.classList.remove(text)
   }, 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) {
   alertFn('用户名必须大于等于8位', false)
   console.log('用户名必须大于等于8位')
   return // 阻止代码继续执行
   }
   if (password.length < 6) {
   alertFn('密码必须大于等于6位', false)
   console.log('密码必须大于等于6位')
   return // 阻止代码继续执行
   }

   // 1.4 基于axios提交用户名和密码
   // console.log('提交数据到服务器')
   axios({
   url: 'http://hmajax.itheima.net/api/login',
   method: 'POST',
   data: {
      username,
      password
   }
   }).then(result => {
   alertFn(result.data.message, true)
   console.log(result)
   console.log(result.data.message)
   }).catch(error => {
   alertFn(error.response.data.message, false)
   console.log(error)
   console.log(error.response.data.message)
   })
})
</script>

9. form-serialize 插件

作用：快速获取表单数据并转换为对象。
用法：
const form = document.querySelector('.example-form')
const data = serialize(form, { hash: true, empty: true }) https://i-blog.csdnimg.cn/direct/b7197093435f4a2b9db57bd17aba642d.png
<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>


<script src="./lib/form-serialize.js"></script>
<script>
document.querySelector('.btn').addEventListener('click', () => {
   //2. 使用serialize函数快速收集表单元素的值
   // 参数1 要获取哪个表单的数据
   // 表单元素设置name属性值会作为对象的属性名
   // 参数2 配置对象
   // hash 设置获取数据结构
   // - true JS对象（推荐）一般请求体里提交给服务器
   // - false 查询字符串
   // empty 设置是否获取空值
   // - true 获取空值（推荐）数据结构和标签结构一致
   // - false 不获取空值

   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>
</body> 解包，快速获得多个表单数据：
   // 设置表单 name属性的值
   const form = document.querySelector('.login-form')
   console.log(form)
   const data = serialize(form, { hash: true, empty: true })
   console.log(data)

   // 1.2 获取用户名和密码
   // const username = document.querySelector('.username').value
   // const password = document.querySelector('.password').value
   // console.log(username, password)

   // 解包
   // const { username, password } = data
   const { username: username, password: password } = data

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

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

页: [1]

IT评测·应用市场-qidao123.com技术社区's Archiver

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