处理来自一个Ajax请求的JSON

最新推荐文章于 2022-05-04 20:15:48 发布

xiantouxu

最新推荐文章于 2022-05-04 20:15:48 发布

阅读量224

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/xiantouxu/article/details/77504718

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

服务器端

var http = require('http');
//启动服务器，监听请求
var server = http.createServer().listen(8080);
server.on('request',function(req,res){
    var titleList = {
        "list":[
        {
            "id":"id1",
            "name":"Title one"
        },
        {
            "id":"id2",
            "name":"Title two"
        },{
            "id":"id3",
            "name":"Title three"
        },{
            "id":"id4",
            "name":"Title four"
        }
        ],
        "totalRecords":4
    };
    res.writeHeader(200,{
        "Content-Type":"application/json",
        "Access-Control-Allow-Origin":"*",//允许跨域
        });
    res.end(JSON.stringify(titleList));
});

这里写图片描述

客户端

<!DOCTYPE html>
<html>
<head>
    <title>Stories</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="result"></div>
    <script type="text/javascript">
    var httpRequest ;
    //ajax对象
    if(window.XMLHttpRequest){
        httpRequest = new XMLHttpRequest();
    }
    //构建请求
    var url = "http://localhost:8080/";
    httpRequest.open('GET',url,true);
    httpRequest.onreadystatechange=getData;
    httpRequest.send();
    function getData(){
        if(httpRequest.readyState ==4 && httpRequest.status==200){
            try{
                //JavaScript函数JSON.parse来解析JSON数据
                var jsonObj = JSON.parse(httpRequest.responseText);
                jsonObj.list.forEach(function(element){
                    console.log(element.name);
                    document.write(element.name);
                });
            }catch(e){
                console.log(e.message);
            }
        }
    }
    </script>
</body>
</html>