【融职培训】Web前端学习 第6章 jQuery Ajax 3 Ajax第三方模块
【融职培训】Web前端学习 第6章 jQuery Ajax 3 Ajax第三方模块
学习猿地
发布于 2020-06-24 09:50:26
发布于 2020-06-24 09:50:26
一、概述
在上一节的内容中，我们说了如何自己封装一个简易的Ajax方法。
其实在实际项目开发中，我们并不需要自己去封装，已经有很多成熟的Ajax第三方模块了，直接使用即可。
本节就来说说一个常用的Ajax第三方模块-Axios。
二、下载并引入Axios
可以直接使用npm下载Axios，命令如下：
npm install axios因为我们要将Axios引入到前端的页面，所以需要将axios.js文件拷贝到静态文件目录。
在node_modules目录中，找到axios>dist>axios.min.js文件，拷贝到public目录中即可。然后在模板中用script标签来引入此js文件。
三、后台程序
关于后台程序，我们仍然使用第01节的水果列表增删改查接口，实例代码如下所示：
1 //数据
2 let dataList = ["香蕉","苹果","鸭梨"];
3
4 //get查看
5 router.get("/fruits", ctx => {
6 ctx.body = dataList;
7 })
8 //post添加
9 router.post("/fruits", ctx => {
10 let fruit = ctx.request.body.fruit;
11 dataList.push(fruit);
12 ctx.body = dataList;
13 })
14
15 //put修改
16 router.put("/fruits/:id", ctx => {
17 let id = ctx.params.id;
18 let fruit = ctx.request.body.fruit;
19 dataList.splice(id,1,fruit);
20 ctx.body = dataList;
21 })
22 //delete删除
23 router.delete("/fruits/:id", ctx => {
24 let id = ctx.params.id;
25 dataList.splice(id,1);
26 ctx.body = dataList;
27 })四、Axios的常用方法
接下来，使用axios实现用户列表的增删改查。
1 //get请求查询数据
2 axios.get("/fruits").then( res => {
3 console.log(res.data)
4 } )
5 //post请求添加数据
6 axios.post("/fruits",{
7 fruit:"草莓"
8 }).then( res => {
9 console.log(res.data)
10 } )
11 //put请求修改数据
12 axios.put("/fruits/0",{
13 fruit:"西瓜"
14 }).then( res => {
15 console.log(res.data)
16 } )
17 //delete请求删除数据
18 axios.delete("/fruits/0").then( res => {
19 console.log(res.data)
20 } )通过上面的代码可以看到，使用Axios完成异步的数据操作是非常简单的，我们在后续章节的Ajax相关内容，都会使用Axios来实现。
五、jQuery中的ajax方法
我们之前使用jQuery主要是用来操作DOM，其实jQuery也封装了Ajax方法，实例代码如下所示：
1 $.ajax({
2 url:"/fruit",
3 type:"get"
4 }).done( res => {
5 console.log(res);
6 })如果项目是基于jQuery开发的，jQuery中的Ajax方法可以完全替代Axios，但是如果项目并没有使用jQuery，那么使用Axios这种轻量级的Ajax库会更方便。
六、总结
本节主要讲解的是Ajax的使用方法，在实际项目开发中，Axios需要结合表单和表格元素完成数据的操作，并在页面中展示出操作的结果。
如何在页面中操作数据，我们会在下一章《Vue.js入门与进阶》中，结合Vue框架一起讲解。
七、课后练习
默认数据如下所示，
["香蕉","苹果","鸭梨"]
分别用jQuery和axios实现后台数据列表的增删改查，要求如下：
- get方法获取数据列表
- post添加数据，然后重新查询
- put修改数据，然后重新查询
- delete删除数据，然后重新查询
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-06-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录