首頁 > 開發者 > JavaScript
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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
