javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > 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>

您可能感兴趣的文章:
阅读全文