javascript:json數(shù)據(jù)的頁面綁定
標簽：
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> |
點擊查看更多內(nèi)容
1人點贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦