您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
javascript:json数据的页面绑定示例代码
作者：佚名 责任编辑：admin 更新时间：2022-06-22
本篇文章主要是对javascript:json数据的页面绑定示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
web开发中，如果需要将“服务端返回的json对象”绑定到“现有页面上的dom元素”，传统赋值的方式太繁琐，写起来也很累(特别是json对象很大时)，于是想出了下面的偷懒方法，不过有二个前提： 1、元素的id要与json对象中的属性命名一致 2、json对象中的属性名，最好不要重复 代码如下: <!doctype html> <html> <head> <title>json对象遍历演示</title> <script type="text/javascript"> var obj = {a:'a1',b:'b1',c:{c1:'c1'},d:1,e:true,f:new Date("2012/12/24")}; //showJsonProperty(obj); /* function showJsonProperty(jsonObj){ for(var o in jsonObj){ alert("属性名：" + o.toString() + "，值：" + jsonObj[o].toString() + "，type：" + typeof(jsonObj[o]) ); if (typeof(jsonObj[o])=="object") { showJsonProperty(jsonObj[o]); } } } */ function bindJson(jsonObj){ for(var o in jsonObj){ var domObj = document.getElementById(o.toString()); if (domObj!=undefined){ domObj.value=jsonObj[o].toString(); } if (typeof(jsonObj[o])=="object") { bindJson(jsonObj[o]); } } } function bindData(){ bindJson(obj); } </script> <style type="text/css"> input{width:80px;height:18px;margin:0 10px 0 0;border:1px #999 solid} input:hover{border:1px #ff0000 solid} input[type=button]{background-color:#efefef;height:22px;} </style> </head> <body> <div> a: <input id="a" /> b: <input id="b" /> c.c1: <input id="c1" /> d: <input id="d" /> e: <input id="e" /> f: <input id="f" /> <input type="button" value="绑定" id="btnBind" onclick="bindData()"/> </div> </body> </html>- 上一个程序编程： JS批量修改PS中图层名称的方法
- 下一个程序编程： js加入收藏以及使用Jquery更改透明度
