javascript:json数据的页面绑定
标签：
JavaScript
web开发中，如果需要将“服务端返回的json对象”绑定到“现有页面上的dom元素”，传统赋值的方式太繁琐，写起来也很累(特别是json对象很大时)，于是想出了下面的偷懒方法，不过有二个前提：
1、元素的id要与json对象中的属性命名一致
2、json对象中的属性名，最好不要重复
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <!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> |
点击查看更多内容
1人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦