html5解析json

<!DOCTYPE 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对象<br>";  


            str += "<span>Total:"+jsonObj.total+"</span><br><span>Data:";  


            for (var i=0;i<jsonObj.data.length ; i++)  


            {  


                str += "id:" + jsonObj.data[i].id + ",name:" + jsonObj.data[i].name+"<br>";  


            }  


            str += "</span><br>";  


            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字符串:<br>" + jsonStr;  


            document.querySelector("#res").innerHTML = str;  


        }  


    //-->  


    </script>  


</body>  


</html>




转自:http://www.kuitao8.com/20140410/2229.shtml

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码