Ajax基础：处理服务端返回的json类型数据

最新推荐文章于 2023-05-30 21:27:40 发布

昔冰_G

最新推荐文章于 2023-05-30 21:27:40 发布

阅读量510

点赞数 1

分类专栏： Ajax 文章标签： ajax json html

本文链接：https://blog.csdn.net/qq_38800316/article/details/120391880

版权

Ajax 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

客户端 02ajax.html 脚本代码：

<body>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('get', 'http://localhost:3000/responseData');
        xhr.send();

        xhr.onload = function() {
            // 由于获取到responseText这个响应内容的是一个字符串，不方便对数据进行针对提取
            // 所以我们要转为JSON对象
            var responseText = JSON.parse(xhr.responseText);

             var str = '<h2>姓名：' + responseText.name + '</h2>';
             str+= '<h2>年龄：' + responseText.age + '</h2>';

            document.body.innerHTML = str;
        }
    </script>
</body>

服务端测试代码：（app.js）

const express = require('express');
const app = express();
 
//指明静态文件目录位置，以便浏览器中对（客户端）静态文件的加载
app.use(express.static(path.join(__dirname, 'public')));
 
app.get('/responseData', (req, res) => {
    res.send({ "name": 'xibing', "age": 20 });
})
 
app.listen(3000);
console.log('3000已启动');

1、服务端响应内容是json类型

2、客户端获通过responseText来获取响应内容---字符串类型

3、为了对json数据做提取，将字符串类型的json数据转为对象类型，使用JSON.parse()

最终效果就是像客户端中写的一样，把响应数据中的name和age获取到并显示在浏览器页面中：

昔冰_G

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax基础：处理服务端返回的json类型数据

客户端 02ajax.html脚本代码：<body> <script> var xhr = new XMLHttpRequest(); xhr.open('get', 'http://localhost:3000/responseData'); xhr.send(); xhr.onload = function() { // 由于获取到responseText这个响应内容的是一个.
复制链接

扫一扫

专栏目录