Ajax+koa2简单介绍

Koa搭建后端平台

什么是Koa?  ———基于Node.js平台的下一代web开发框架

官网：Koa(koa.js)中文网 -- 基于 Node.js 平台的下一代 web 开发框架https://www.koajs.com.cn

环境搭建

1、安装node.s

2、脚手架安装：npm i -g koa-generator

3、创建项目：koa2 projectname(项目名)

4、安装依赖：npm i

5、项目启动：npm run dev

6、访问：http://localhost:3000;        访问资源(根目录)：/public

Ajax基本框架

前端/html

    <script>
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            console.log('请求已经完成');
        }

        /* 参数解析  请求方式  路由  是否异步（默认true）*/

        xhr.open('GET','/list',true);    //{1}    get请求数据

      //xhr.open('POST','/list',true);    //{2}    post请求数据

      //xhr.open('GET','/list?type=phone&count=20',true);        //{3}    get发送数据

      //xhr.open('POST','/list2',true);        //post发送，纯文本方式(不提倡)  
      //xhr.send('James');            //纯文本方式   
   
      //xhr.open('POST','/list2',true)      //{4}    post发送，"名称/值"对的方式
      //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')  //{4}
      //xhr.send('username=James&password=123456');    //{4}


        xhr.send();    //{1}{2}{3}
    

    </script>

后端/router

    /* ctx：请求上下文，包括请求对象和响应对象 */
    router.get('/list', (ctx, next) => {   
    
        console.log(ctx.request.query);        //接收 {3}
        
        ctx.body = 'list data';     //响应(返回)  {1}
    })

    router.post('list2', (ctx, next) => {  
      
        console.log(ctx.request.body);           //{4}
        
        ctx.body = 'list2.data';                //{2}
    })

JSON

把字符串类型的JSON转化为对象类型JSON

    var json = '{"username": "James"}';
    json = JSON.parse(json);

把对象类型的JSON转化为字符串类型的JSON

    var json1 = JSON.stringify({"username": "James"});
    console.log(json1);

get请求获取数据

后端/router

    /* ctx：请求上下文，包括请求对象和响应对象 */
    router.get('/list', (ctx, next) => {       
        console.log(ctx.request.query);        //获取前端数据
        
        ctx.body = {            //响应（返回）数据
            errcode : 0,
            errmsg : 'ok', 
            list : [
                {"username" : "James", "age" : 30, "gender" : "男"}
            ]           
        };     
    })

前端/html

var xhr = new XMLHttpRequest();
xhr.onload = function() {
    if(this.status == 200) {
        //console.log(xhr.responseText);        //得到字符串类型的JSON
        var data = JSON.parse(xhr.responseText);    //具体解析响应数据
        console.log(data.list[0].username);        //James
    }
}

响应JSON数据到页面

 后端/router

router.get('/list',async (ctx,next) => {
  /* console.log(ctx.request.query); */
  ctx.body = {
    errcode: 0,
    errmsg: 'ok',
    list: [
      {"username": "James", "age": 36},
      {"username": "Jack", "age": 20},
      {"username": "Mary", "age": 26}
    ]
  }
});

 前端/html

1、DOM方式演示

    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <script>
        var tbody = document.querySelector('tbody');
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            //console.log('请求已经完成');
            if(this.status === 200) {
                // console.log(xhr.responseText);
                var data = JSON.parse(xhr.responseText);
                for(var i =0; i < data.list.length ; i++){
                    var tr = document.createElement('tr');
                    for(var attr in data.list[i]) {
                        var td = document.createElement('td')
                        td.innerHTML = data.list[i][attr];
                        tr.append(td)
                    }
                    tbody.append(tr)
                }
            }
        };
        xhr.open('GET','/list',true);
        xhr.send();
    </script>

2、拼接模板字符串方式

 <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <script>
        var tbody = document.querySelector('tbody');
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            if(this.status == 200) {
                var data = JSON.parse(xhr.responseText);
                tbody.innerHTML = data.list.map((v,i) => {
                    return `
                        <tr>
                            <td>${v.username}</td>
                            <td>${v.age}</td>
                        </tr>
                    `;
                }).join('');
            }
        };
        xhr.open('GET','/list',true);
        xhr.send();
    </script>

3、前端模板引擎方式

优点：把逻辑层和视图层彻底分开

以art-template为例  ——  前往官网下载文档，放到项目/public/javascript下等待引用

在HTML头部引入  <script src="javascripts/template-web.js"></script>

    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    /* 定义模板 */
    <script id="tpl-tbody" type="text/html">
        {{ each list }}
            <tr>
                <td>{{ $value.username }}</td>
                <td>{{ $value.age }}</td>
            </tr>
        {{ /each }}
    </script>
    <script>
        var tbody = document.querySelector('tbody');
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            if(this.status == 200) {
                var data = JSON.parse(xhr.responseText);
                tbody.innerHTML = template('tpl-tbody', data);   //调用template()方法
            }
        };
        xhr.open('GET','/list',true);
        xhr.send();
    </script>

发送JSON数据（到后端）

 前端

        xhr.open('POST','/list2',true)      
        xhr.setRequestHeader('Content-Type','application/json')  
        xhr.send(JSON.stringify{ "username" = "James" });   
        //post方式发送时，要将对象类型的json转为字符串类型发送

 后端

    router.post('list2', (ctx, next) => {  
      
        console.log(ctx.request.body);           //接收
        
        ctx.body = 'list2.data';                //返回
    })

简单实例： Ajax+koa2简单实例演示_lq_1999的博客-CSDN博客