萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> javascript:json數據的頁面綁定示例代碼

javascript:json數據的頁面綁定示例代碼

 本篇文章主要是對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>  
copyright © 萬盛學電腦網 all rights reserved