来自 系统操作 2019-09-11 22:51 的文章
当前位置: 六合联盟网 > 系统操作 > 正文

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>

你恐怕感兴趣的稿子:

  • JS中Json数据的管理和平解决析JSON数据的法门详解
  • Java后台拍卖Json格式数据的措施
  • php管理json格式数据优秀案例计算
  • JSON复杂数据管理之Json树形结构数据转Java对象并储存到数据库的达成
  • JavaScript管理深入分析JSON数据经过详解
  • jQuery中使用each处理json数据
  • jQuery管理json数据重返数组和出口的措施
  • jquery管理json数据实例剖析
  • jsp准将后台传递过来的json格式的list数据绑定到下拉菜单select
  • Json数据异步绑定到分界面包车型客车Table並且自动刷新原理及代码
  • JS 对java再次回到的json格式的数量管理办法
  • json数据管理本领(字段带空格、扩展字段、排序等等)
  • json数据管理及数据绑定

本文由六合联盟网发布于系统操作,转载请注明出处:json数据的页面绑定示例代码

关键词: