Ajax的封装——Axios与jQuery

一、下载安装

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;
    // 要删除元素的索引,删除几个元素,将删除的元素替换为XX
    dataList.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： 

    
    
    
    



    查询数据
    添加数据
    修改数据
    删除数据

    
    

index页面： 

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

（1）查询

点击查询按钮：

  

（2）添加

点击添加按钮：

  

（3）修改

点击修改按钮：

 

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

（4）删除 

 点击删除按钮：

 

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

三、jQuery的Ajax方法 1、下载安装jQuery

cnpm install --save jquery

2、index.html

    查询数据
    添加数据
    修改数据
    删除数据

    
    

3、效果

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

 

四、总结

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

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