【融职培训】Web前端学习 第6章 jQuery Ajax 3 Ajax第三方模块

一、概述

在上一节的内容中，我们说了如何自己封装一个简易的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//数据 2let dataList = ["香蕉","苹果","鸭梨"]; 3 4//get查看 5router.get("/fruits", ctx => { 6ctx.body = dataList; 7}) 8//post添加 9router.post("/fruits", ctx => {10let fruit = ctx.request.body.fruit;11    dataList.push(fruit);12ctx.body = dataList;13})1415//put修改16router.put("/fruits/:id", ctx => {17let id = ctx.params.id;18let fruit = ctx.request.body.fruit;19dataList.splice(id,1,fruit);20ctx.body = dataList;21})22//delete删除23router.delete("/fruits/:id", ctx => {24let id = ctx.params.id;25dataList.splice(id,1);26ctx.body = dataList;27})

四、Axios的常用方法

接下来，使用axios实现用户列表的增删改查。

1//get请求查询数据 2axios.get("/fruits").then( res => { 3    console.log(res.data) 4} ) 5//post请求添加数据 6axios.post("/fruits",{ 7fruit:"草莓" 8}).then( res => { 9    console.log(res.data)10} )11//put请求修改数据12axios.put("/fruits/0",{13fruit:"西瓜"14}).then( res => {15    console.log(res.data)16} )17//delete请求删除数据18axios.delete("/fruits/0").then( res => {19    console.log(res.data)20} )

通过上面的代码可以看到，使用Axios完成异步的数据操作是非常简单的，我们在后续章节的Ajax相关内容，都会使用Axios来实现。

五、jQuery中的ajax方法

我们之前使用jQuery主要是用来操作DOM，其实jQuery也封装了Ajax方法，实例代码如下所示：

1$.ajax({2url:"/fruit",3type:"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删除数据，然后重新查询

【融职教育】在工作中学习，在学习中工作