实现json的三个操作（训练JSON）

1、实现JSON的对象的显示:

jsonObj

效果:

 

2、实现JSON字符串数组的下拉列表显示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现JSON</title>
    <script>

        function loadArray() {
           var cn = ["德国","英国","中国"];
           var cnselect = "<select>";
           for (var i = 0;i<cn.length;i++){
               cnselect += "<option value='"+i+"'>"+cn[i]+"</option>";
           }
           cnselect += "</select>";
           document.getElementById("jsonArray").innerHTML = cnselect;
        }

    </script>
</head>
<body onload="loadArray()">

<div id="jsonArray"></div>

</body>
</html>

 

效果:

 

 3、实现JSON对象数组的表格显示:

jsonObjArray 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON的实现</title>
    <script>
        function loadObjArray() {
            var objs = [{"id":"1001","name":"admin","pwd":"000000"},{"id":"1002","name":"axe","pwd":"123456"},{"id":"1003","name":"gsl","pwd":"666666"}];
        var trs = "<tr><td>ID</td><td>姓名</td><td>密码</td></tr>";
        for (var i = 0;i<objs.length;i++){
            trs += "<tr><td>"+objs[i].id+"</td><td>"+objs[i].name+"</td><td>"+objs[i].pwd+"</td></tr>";
        }
        document.getElementById("jsonObjArray").innerHTML = trs;
        }

    </script>
</head>
<body onload="loadObjArray()">
<table id="jsonObjArray"border="1"width="300px">

</table>

</body>
</html>

 

效果:

 

posted @ 2019-10-16 23:15  AxeBurner  阅读(310)  评论(0)  编辑  收藏  举报