八、服务端响应Json以及前端获取Json

默九思

已于 2023-07-09 20:23:18 修改

阅读量890

点赞数 1

分类专栏： AJAX学习文章标签： json 前端

于 2023-07-09 20:06:58 首次发布

本文链接：https://blog.csdn.net/qq_43733614/article/details/131626537

版权

AJAX学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

个人学习记录，欢迎指点讨论

1、创建服务端代码server.js

//1、引入express
const express = require('express');

//2、创建引用对象
const app = express();

//3、创建路由规则
app.all('/json-server',(request,response) =>
{
    //设置响应头    允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应数据
    const data = {
        name: 'json'
    };
    //需要对data进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

//4、监听端口启动服务
app.listen(8000,()=>{

    console.log("服务器已经启动，8000端口监听中...");
});

Tips：let 声明的变量只会在声明 let 变量所处的代码块中有效

2、创建前端页面3-json.html

2.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 #90B;
        }
    </style>
</head>
<body>
    <div id = 'result'></div>
    <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function(){
            //创建请求
            const xhr = new XMLHttpRequest();
            //初始化  设置请求方法，url
            xhr.open('Get','http://127.0.0.1:8000/json-server');
            //发送请求
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //1、手动对数据进行转换
                        let data = JSON.parse(xhr.response);
                        console.log(data)
                        result.innerHTML = data.name;
                    } 
                }
            }
        }
    </script>
</body>
</html>

将两个文件放入一个文件夹内，并右击文件夹选择在集成终端中打开，终端命令行输入

node server.js

打开html文件，F5运行，ctrl shift I 打开开发者工具，在浏览器按下键盘任意键，显示效果为：

2.2设置响应体类型


<!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 #90B;
        }
    </style>
</head>
<body>
    <div id = 'result'></div>
    <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function(){
            //创建请求
            const xhr = new XMLHttpRequest();
            //设置响应体类型
            xhr.responseType = 'json';
            //初始化  设置请求方法，url
            xhr.open('Get','http://127.0.0.1:8000/json-server');
            //发送请求
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    } 
                }
            }
        }
    </script>
</body>
</html>

测试方法同上