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>
效果:
