淘先锋技术网

首页 1 2 3 4 5 6 7

服务端响应JSON数据

构建测试案例

键盘按键触发请求服务端:

  1. 键盘按下触发事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON响应</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #89b;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function(){
             console.log('键盘按下事件被触发了!');
        }
    </script>
</body>
</html>

在这里插入图片描述

  1. 服务端配置新路由规则:

//JSON 响应
app.all('/json-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send('HELLO AJAX POST');
});
  1. 测试返回的响应结果
   console.log(xhr.response);
   result.innerHTML = xhr.response;

在这里插入图片描述

  1. 服务端返回JSON格式数据
//JSON 响应
app.all('/json-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    //response.send('HELLO AJAX POST');
    //响应一个数据
    const data = {
        name: 'dezai',
        age:18
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});
  1. 前端接收JSON字符串解析两种方式:
    1. 手动对数据转化
       let data = JSON.parse(xhr.response);
       console.log(data);
       result.innerHTML ='姓名:'+ data.name+' 年龄:'+data.age;
  1. 自动转换
    //设置响应体数据的类型
    xhr.responseType = ‘json’;
  console.log(xhr.response);
  result.innerHTML ='姓名:'+ xhr.response.name +' 年龄:'+xhr.response.age;

在这里插入图片描述