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>