用Ajax请求 数据

161 阅读2分钟

1.app.js: //引入对象 const Koa = require('koa'); // 这个地方定义的字母首写为大写,并且要与下面的 创建路由要一致 const Router=require("koa-router"); const koaBody = require('koa-body');//koa-body解析数据 Koa-router 是 koa 的一个路由中间件,它可以将请求的URL和方法 匹配到对应的响应程序或页面。 const koaCors=require('koa-Cors'); const tagRouter = require('./router/tag.router'); const userRouter= require('./router/user.router'); const contentRouter= require('./router/content.router') const jwttestRouter=require('./router/jwttest.router')

//创建对象 const app = new Koa(); app.use(koaCors());

app.use(koaBody({ strict:false //strict 为严格模式 如果没改false就只能请求post方法 }));

const router = new Router(); //创建路由 支持传递参数 tagRouter(router) userRouter(router) contentRouter(router) jwttestRouter(router)

app.listen(3001,()=>{ //listen 监听 监听的是端口号内的内容 (也是打开端口的地址) console.log("http://localhost:3001") //ctrl+单击 nodemon app.js 运行app.js这个包 });

2.text.http:

@url = http://localhost:3001 @json = Content-Type: application/json

@auth=Authorization:Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiYWRtaW4iLCJpYXQiOjE2Mzg1MjIyNDEsImV4cCI6MTYzODUyMjg0MX0.hdX3FtTYuioVjT0OoQrK_EQNoH7HMman-NDK7EP7f60

###jwttest ###登录 POST {{url}}/login {{json}}

{ "name":"admin", "pwd":"123456" }

###获取数据 GET {{url}}/data {{auth}}

tag

###查询 GET {{url}}/tag {{auth}}

###添加 POST {{url}}/tag {{json}}

{ "text":"6" }

###删除 DELETE {{url}}/tag HTTP/1.1 {{json}}

{ "_id":"61a4978faeaf2617de059235" }

user 用户

查询

GET {{url}}/user {{auth}}

添加

post 是代码段

POST 是字母

POST和Content-Type 中间不能加空格、否则会运行不出来/a里面的内容 也会报错

POST {{url}}/user {{json}} // 参数解析

首先明确一点,这也是一种文本类型(和text/json一样),表示json格式的字符串,如果ajax中设置为该类型,则发送的json对象必须要使用JSON.stringify进行序列化成字符串才能和设定的这个类型匹配。

上面的内容和下面的中间得有一个空行、否则会报错

content 测试 传的东西 也是内容

content #一种是表单方式、一种是json方式

id=1000&name=张三

"id":1000,

{ // "text":"张三", "username":"小王同学和小张同学", "password":"zzz22222", "email":"12345@qq.com", "group":"限制会员" }

修改内容

PUT {{url}}/user?_id=61a5e187d8f41c525e8a042b {{json}}

{ "group":"新手上路" }

当要运行时,需要把点击上面的Send Request

删除 (### 三个/三个以上的#会自动识别Send Request )

DELETE {{url}}/user HTTP/1.1 {{json}}

{ // 注意识别id的写法 "_id":"61a5c0ab39997ea6ad63a7c1" }

content

//表单请求方式

id=1000&name=李希

{

"text":"张三"

}

###查询内容 GET {{url}}/Content {{auth}}

###添加内容 POST {{url}}/Content {{json}}

{ "title":"titletitle", "content":"contentcontent" }

删除 (### 三个/三个以上的#会自动识别Send Request )

DELETE {{url}}/content HTTP/1.1 {{json}}

{ // 注意识别id的写法 "_id":"61a5e187d8f41c525e8a042b" }

###修改内容 PUT {{url}}/Content?_id61a4978faeaf2617de059235 {{json}}

{ "top":"true",

}

3.tag.html: **

    $(function(){
        $.ajax({
            url:" http://localhost:3001/tag",
            type:"GET",
            success:function(res){
                if(res.status===200){
                   const data= res.data;
                   let html="";
                   for (let index = 0; index < data.length; index++) {
                       const element = data[index];
                       html+=element.text+"&nbsp;&nbsp";
                       $(".col-xs-12").html(element.text);

                   }
                }
                console.log(res);
            },
            error:function(err){
                console.log(err);
            }
        })
    })

</script>**
效果图:

22.png