一、下载安装

cnpm install axios

Axios是Ajax的第三方模块。

它给我们封装好了一些Ajax方法。

二、使用Axios实现水果列表的增删改查

1、项目目录

public目录存放静态文件。

2、server.js：

const Koa = require("koa");
const router = require("koa-router")();
const nunjucks = require("nunjucks");
const static = require("koa-static");
const views = require("koa-views");
const parser = require("koa-parser");
const app = new Koa();
app.use(parser());
app.use(static(__dirname + "/public"));
app.use(views(__dirname + "/views", {map: {html: "nunjucks"}
}))let dataList = ["香蕉", "苹果", "鸭梨"];router.get("/", async ctx => {await ctx.render("index");
})// get查询
router.get("/fruits", ctx => {ctx.body = dataList;
})// post添加
router.post("/fruits", ctx => {// form-data中输入草莓let fruit = ctx.request.body.fruit;dataList.push(fruit);ctx.body = dataList;
})// put修改
router.put("/fruits/:id", ctx => {let id = ctx.params.id;// form-data中输入草莓let fruit = ctx.request.body.fruit;// 要删除元素的索引,删除几个元素,将删除的元素替换为XXdataList.splice(id, 1, fruit);ctx.body = dataList;
})// delete删除
router.delete("/fruits/:id", ctx => {let id = ctx.params.id;dataList.splice(id, 1);ctx.body = dataList;
})app.use(router.routes());// 设置监听端口
app.listen(3000, () => {console.log("server is running");
})

3、index.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>index</title>
</head><body><button class="get">查询数据</button><button class="post">添加数据</button><button class="put">修改数据</button><button class="delete">删除数据</button><script src="/js/axios.min.js"></script><script></script></body></html>

index页面：

我们接着给按钮添加上事件：

（1）查询

<script>// 查询document.querySelector(".get").onclick = function () {axios.get("/fruits").then(res => {console.log(res.data);})}
</script>

点击查询按钮：

（2）添加

<script>// 添加document.querySelector(".post").onclick = function () {axios.post("/fruits", {fruit: "草莓"}).then(res => {console.log(res.data);})}
</script>

点击添加按钮：

（3）修改

<script>// 修改document.querySelector(".put").onclick = function () {axios.put("/fruits/1", {fruit: "西瓜"}).then(res => {console.log(res.data);})}
</script>

点击修改按钮：

上面一个是修改前，下面是修改后。

（4）删除

    <script>// 删除document.querySelector(".delete").onclick = function () {axios.delete("/fruits/0").then(res => {console.log(res.data);})}</script>

点击删除按钮：

上面一个是删除前，下面一个是删除后。

三、jQuery的Ajax方法

1、下载安装jQuery

cnpm install --save jquery

2、index.html

<body><button class="get">查询数据</button><button class="post">添加数据</button><button class="put">修改数据</button><button class="delete">删除数据</button><script src="/js/jquery.min.js"></script><script>$(".get").click(function () {$.ajax({url: "/fruits",type: "get",}).done(res => {// 这种的res就是数据,不用res.dataconsole.log(res);})})</script>
</body>

3、效果

点击查询按钮，控制台输出：

四、总结

本节只是了解Axios的基础用法，下一章会学Vue.js。

结合Vue处理表单和表格的异步数据。

Ajax的封装——Axios与jQuery相关推荐

Vue的axios与ajax的区别：axios是对ajax的封装
分析 axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样. ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装. axios是ajax ...
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)
根据视频进行整理 [https://www.bilibili.com/video/BV1WC4y1b78y?p=1] 视频资料百度网盘: 链接:[https://pan.baidu.com/s/1n ...
封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{// type:"get"/"post", // dataTy ...
jq封装接口ajax,jquery ajax方法封装及api文件设计的代码示例
本篇文章给大家带来的内容是关于jquery ajax方法封装及api文件设计的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 封装 jquery ajax 文件/** * 封 ...
易扩展,易复用,封装axios
axios介绍: axios是近几年比较火的一个前端库,完美代替了jquery中的ajax,它不仅可以运行在浏览器也可以运行在nodejs环境下,而且支持Promise API 可以拦截请求,和返回. ...
ios ajax报错404,ajax 报错 axios正确
ajax 报错 axios正确 [2021-01-28 03:39:02] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(" ...
ajax 加载提示锁屏,js锁屏解屏通过对$.ajax进行封装实现
jquery插件源码: /** * 对jquery中$.ajax进行封装,以便加入锁屏功能 * isAsync 是否为异步请求,默认为true * isLock 是否锁屏,默认是true * isCa ...
JQuery（三）-- AJAX的深入理解以及JQuery的使用
HTTP HTTP http: 超文本传输协议.特点: 简单.快速.灵活.无状态.无连接 URL: 统一资源定位符. 组成:协议名://主机IP:端口号/项目资源地址?传递参数的键值对#锚点 ①ip ...
封装 axios 请求
vue 封装 js 方法一.安装 axios 并引入: Axios 中文说明安装axios:npm install axios 因为基本上全局都会使用到 axios 方法,所以在 main.js ...

Ajax的封装——Axios与jQuery

一、下载安装

二、使用Axios实现水果列表的增删改查

1、项目目录

2、server.js：

3、index.html：

（1）查询

（2）添加

（3）修改

（4）删除

三、jQuery的Ajax方法

1、下载安装jQuery

2、index.html

3、效果

四、总结

Ajax的封装——Axios与jQuery相关推荐

最新文章

热门文章