AJAX 怎么获取JSON中的指定数据

Posted 2023-04-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX 怎么获取JSON中的指定数据相关的知识，希望对你有一定的参考价值。

API返回的JSON数据格式，现在需要ajax获取ID字段的值并显示到网页上。"data": "api_type":"\u5355\u54c1\u8be6\u7ec6\u4fe1\u606fV1.4", "update_time":"2018\/12\/16 11:09:19","total_num":1, "update_content":"\u65b0\u589e\u52a0\u7684\u5355\u54c1\u8be6\u7ec6\u4fe1\u606fAPI","result": "ID":"17624909", "GoodsID":"535753941444", "Title":"\u4ffa\u5e84\u540e\u5c71\u91ce\u751f\u5c71\u6800\u5b50\u679c500g\u9ec4\u6800\u5b50\u82b1\u8349\u8336\u5c71\u6800\u5b50\u8336\u6800\u5b50\u82b1\u8336\u4e24\u7f50\u88c5", "D_title":"\u91ce\u751f\u6800\u5b50\u679c\u6800\u5b50\u82b1\u8336\u7f50\u88c5500g"

参考技术A 假设你从ajax获取字符串为 ajaxString,则可以这样获取ID:
var jsonData = JSON.parse(ajaxString)；
var id = jsonData.result.ID;

ajax怎么获取json数据和xml数据

ajax如何的发哦json数据和xml数据

ajax使用方法就不多=说了，参照这篇https://www.cnblogs.com/shangrao/p/12861845.html

json和xml不同的地方是得到响应方法。

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

xml文件

文件格式介绍：结构化数据

获取xml文件方法

1.Js解析xml格式

2.根据xml文本内容创建xml对象

3.获取元素节点的文本内容

4.获取元素的属性值

data.xml

<?xml version="1.0" encoding="utf-8"?>
<bookstore>
    <book>
        <name>三国演义</name>
        <category>文学</category>
        <desc>描述</desc>
    </book>    
    <book>
        <name>水浒传</name>
        <category>文学</category>
        <desc>草寇or英雄豪杰</desc>
    </book>    
    <book>
        <name>西游记</name>
        <category>文学</category>
        <desc>妖魔鬼怪牛鬼蛇神什么都有</desc>
    </book>    
    <book>
        <name>红楼梦</name>
        <category>文学</category>
        <desc>宝哥哥与林妹妹的爱情史</desc>
    </book>    
</bookstore>

HTML页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json文件</title>
<script type="text/javascript">
    window.onload = function(){
        var btn = document.getElementById(\'btn\');
        btn.onclick = function(){
            showBookInfo();
        }
        function showBookInfo(){
            document.getElementById(\'bookInfo\').innerHTML = \'\';
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject(\'Microsoft.XMLHTTP\');
            }
            console.log(\'第一步\'+xhr.readyState);
            xhr.open(\'get\',\'./data.xml\');//xml文件位置
            console.log(\'第二步\'+xhr.readyState);
            xhr.send(null);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    var data = xhr.responseXML;//返回xml对象（所有内容--document）
                    
                    var bs = data.getElementsByTagName(\'bookstore\')[0];//得到bookstores节点
                    console.log(bs);
                    var books = bs.getElementsByTagName(\'book\');
                    var tag = \'\';
                    for(var i=0;i<books.length;i++){//循环遍历内容
                        var book = books[i];
                        var name = book.getElementsByTagName(\'name\')[0];
                        var category = book.getElementsByTagName(\'category\')[0];
                        var desc = book.getElementsByTagName(\'desc\')[0];
                        tag += \'<tr><td>\'+getNodeText(name)+\'</td><td>\'+getNodeText(category)+\'</td><td>\'+getNodeText(desc)+\'</td></tr>\';
                    }
                    var tbody = document.createElement(\'tbody\');
                    tbody.innerHTML = tag;
                    document.getElementById(\'bookInfo\').appendChild(tbody);
                }
            }
            
        
        }
    
    }
    //获取文本节点内容
    function getNodeText(node){
        if(window.ActiveXObject){//IE
            return node.text;
        }else{//标准浏览器
            if(node.nodeType == 1){
                return node.textContent;
            }
        }
    }
</script>
</head>
<body>
    <input type="button" value="点击" id="btn">
    <div>
        <table id="bookInfo">

        </table>
    </div>
</body>
</html>

json文件

文件格式介绍：JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写

json简单说就是javascript中的对象和数组。{ } 这是对象， [ ] 这是数组。

获取数组内容只需要arr[索引]就可以了。

获取对象内容只需要 obj.属性名就可以了。

解析下面的数据，整个json 文件我们给他声明一个变量叫datas。

datas 对象是可以放任何内容的，下面是有一个属性 total，一个数组 date，一个键值对 obj。

获取对象的值直接 datas.total，就可以得到“4”了。

datas.data 就可以得到[....]一个数组了，数组有4个元素，这四个元素是四个不同的对象，obj.data[0]，代表第一个数组，obj.data[0].name 就可以到第一个数组的name值 “三国演义”。

datas["adf"] 就可得到"aa"值。其实相当于数组，只不过下标可以自己去定义。

data.json

{
    "total":"4",
    "data":[
        {
            "name":"三国演义",
            "category":"文学",
            "desc":"一个军阀混战的年代"
        },{
            "name":"水浒传",
            "category":"文学",
            "desc":"草寇or英雄好汉"
        },{
            "name":"西游记",
            "category":"文学",
            "desc":"妖魔鬼怪牛鬼蛇神什么都有"
        },{
            "name":"红楼梦",
            "category":"文学",
            "desc":"一个封建王朝的缩影"
        }
    ],
    "obj":{"adf":"aa"}
}

html页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json文件</title>
<script type="text/javascript">
    window.onload = function(){
        var btn = document.getElementById(\'btn\');
        btn.onclick = function(){
            showBookInfo();
        }
        function showBookInfo(){
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject(\'Microsoft.XMLHTTP\');
            }
            xhr.open(\'get\',\'./data.json\');
            xhr.onreadystatechange = function(){//回调函数
                if(xhr.readyState == 4 && xhr.status == 200){
                    var data = JSON.parse(xhr.responseText);//得到数据
                    console.log(data);//打印数据
                    var total = data.total;//得到 4 值
                    var list = data.data;//得到data数组
                    var tag = \'\';
                    for(var i=0;i<total;i++){
                        var book = list[i];
                        tag += \'<tr><td>\'+book.name+\'</td><td>\'+book.category+\'</td><td>\'+book.desc+\'</td></tr>\';
                    }
                    var tbody = document.createElement(\'tbody\');
                    tbody.innerHTML = tag;
                    document.getElementById(\'bookInfo\').appendChild(tbody);
                }
            }
            xhr.send(null);
        }
    
    }

</script>
</head>
<body>
    <input type="button" value="点击" id="btn">
    <div>
        <table id="bookInfo">

        </table>
    </div>
</body>
</html>

以上是关于AJAX 怎么获取JSON中的指定数据的主要内容，如果未能解决你的问题，请参考以下文章

ajax 返回的是json 怎么获取到

spring mvc $.ajax没有指定contentType ，导致后台无法接收到数据

AJAX如何解析后台传来的json数据？

怎么获取AJAX前台返回JSON 数据

Ajax获取到后台json数据，然后怎么取其中name的值赋值给li标签里面

jsp中，用ajax获取数据