查看如何将JSON数据与网页相互关联的代码实例

发布时间：2023-09-27 14:55:06 所属栏目：教程来源：

导读：web开发中，如果需要将“服务端返回的json对象”绑定到“现有页面上的dom元素”，传统赋值的方式太繁琐，写起来也很累(特别是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>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!