首页 javaWEB html中怎么解析json数据

html中怎么解析json数据

HTML5已原生支持json的解析,window.JSON.parse()将baijson格式字符串du转换为json对…

HTML5已原生支持json的解析,window.JSON.parse()将baijson格式字符串du转换为json对象,window.JSON.stringify()将json对象转换为json格式字符串。

示例:bai
Html代码 
<!duDOCTYPE HTML>  
<html>  
<head>  
    <title>Window.JSON</title>  
    <meta charset="gb18030">  
</head>  
   
<body>  
    <button type="button" id="btn1">解析json字符串</button>  
    <button type="button" id="btn2">json对象转换为json字符串</button>  
    <div id="res">  
       
    </div>  
    <script language="JavaScript">  
    <!--  
        var jsonStr = "{\"total\":100,\"data\":[{\"id\":10001,\"name\":\"scott\"},{\"id\":10002,\"name\":\"tiger\"}]}";  
        var jsonObj = window.JSON.parse(jsonStr);  
           
        document.getElementById("btn1").onclick = function() {  
            var str = "json字符串解析为json对象";  
            str += "<span>Total:"+jsonObj.total+"</span><span>Data:";  
            for (var i=0;i<jsonObj.data.length ; i++)  
            {  
                str += "id:" + jsonObj.data[i].id + ",name:" + jsonObj.data[i].name+"";  
            }  
            str += "</span>";  
            document.querySelector("#res").innerHTML = str;  
   
        }  
        document.getElementById("btn2").onclick = function() {  
            var jsonObj = {total:100,data:[{id:10001,name:"scott"},{id:10002,name:"tiger"}]};  
            var jsonStr = window.JSON.stringify(jsonObj);  
            var str = "转为json字符串:" + jsonStr;  
            document.querySelector("#res").innerHTML = str;  
        }  
    //-->  
    </script>  
</body>  
</html>

 

免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。

为您推荐

nodejs 整理记录

nodejs 整理记录

下载包 https://blog.csdn.net/m0_59878114/article/details/120274...
websocket测试html

websocket测试html

<!DOCTYPE html> <html> <head> <meta cha...
bigdemical两个数比较大小

bigdemical两个数比较大小

/*int result = bigdemical1.compareTo(bigdemical2) result = -...
Beetl2.7 中文文档

Beetl2.7 中文文档

Beetl目前版本是2.7.23,相对于其他java模板引擎,具有功能齐全,语法直观,性能超高,以及编写的模板容易维护等...
纯CSS实现多个便签在一行展示,拖动滚动

纯CSS实现多个便签在一行展示,拖动滚动

div <h2>请注意需要在移动端预览,PC端拖拽无效果</h2> <div class=...
返回顶部