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>

赞 (0)

相关推荐

  • php处理json格式数据经典案例总结

    本文实例总结了php处理json格式数据的方法.分享给大家供大家参考,具体如下: 1.json简介: 何为json? 简 单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序. 通俗点讲,它是一种数据的存储格式,就像php序列化后的字符串一样. 它也是一种数据描述,比如:我们将一个数组序列化后存放,就可以很容易的反序列化后应用:json也是如此,只不过它搭建的是

  • jquery处理json数据实例分析

    一.JSON的一些基础知识. JSON中对象通过"{}"来标识,一个"{}"代表一个对象,如{"AreaId":"123"},对象的值是键值对的形式(key:value). "[]",标识数组,数组内部各个数据之间通过","分割,如["AreaId":"123","AreaId":"345"]. 很多情况下是

  • JS 对java返回的json格式的数据处理方法

    如下所示: var dataObj=eval("("+res+")"); alert(dataObj.billBuy) //res是如下的数据 {"billBuy":"1001BRNO1102160002","stkid":"","timeBk":"","timeBuy":"","typeBuy&q

  • json数据处理技巧(字段带空格、增加字段、排序等等)

    1.json数据的正常取值:json[i].fieldName 2.json数据的字段带空格:eval('json[' + i + ']["' + field + '"]') 3.json数据的赋值:eval('json[' + i + ']["' + field + '"]=' + jsonFilter.length); 4.json数据增加字段:循环所有数据,直接json[i].newField=defaultValue就可以了 5.json数据的排序:相当于数

  • Json数据异步绑定到界面的Table并且自动刷新原理及代码

    做Winform习惯了,大家都习惯设置datasource这样的写法. 如果想实现页面定时刷新的话,用.net给封装好的updatepanel和timer两个控件实现起来其实挺容易的.这样做加入了很多你不能控制的元素,举个例子说就是:用updatepanel后,你设置的样式很有可能就变了,然后你还需要去调这些.所以还是用一些自己控制性高的代码比较合适. 今天就先从这个updatepanel加timer实现页面自动刷新这个例子来下手吧. 首先来看一下我的一般处理程序,在这个里面,我自己实现的是从数

  • Java后台处理Json格式数据的方法

     1.将对象转换为JSON字符串,返回值为一个JSON字符串 public static String toJson(Object value) { try { return mapper.writeValueAsString(value); } catch (Exception e) { e.printStackTrace(); } return null; } 2. 将JSON字符串转换为实体对象,返回值为实体对象 public static <T> T toObject(String j

  • json数据处理及数据绑定

    一.json数据处理 1.json数据 {"img":"quizvault_internet_test_banner@2x.png", "golds":"200", "praise":"64000", "tit":"互联网给工作带来的麻烦", "tit_describe":"在朋友圈转发身体被掏空,HR找你深情谈话:不

  • JS中Json数据的处理和解析JSON数据的方法详解

    JS中Json数据的处理和解析JSON数据的方法详解

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C.C++.C#.Java.JavaScript.Perl.Python等).这些特性使JSON成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率). JSON的规则很简单: 对象是一个无序的"'名称/值'对"集合.一个对象以&quo

  • jsp中将后台传递过来的json格式的list数据绑定到下拉菜单select

    复制代码 代码如下: <span style="white-space:pre"> </span><select><c:forEach var="fileList" items="${fileList}" varStatus="i"> <option value="${i.count}">${fileList.filePath}</optio

  • JavaScript处理解析JSON数据过程详解

    JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包. JSON的规则很简单: 对象是一个无序的"'名称/值'对"集合.一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"(冒号):"

  • jQuery处理json数据返回数组和输出的方法

    本文实例讲述了jQuery处理json数据返回数组和输出的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: /*print the json object  *  *$("selector").print_r_json(json,opts) : return formatted string (and print)  *sprint_r_json : just return the string;  *print_r_json : return the format

  • JSON复杂数据处理之Json树形结构数据转Java对象并存储到数据库的实现

    在网站开发中经常遇到级联数据的展示,比如选择城市的时候弹出的省市县选择界面.很多前端制作人员习惯于从JSON中而不是从数据库中获取省市县数据.那么在选择了省市县中的某一个城市 ,存储到数据库中需要存储所选城市的代码.所以需要一个能将JSON数据(一般存储在javascript脚本中)结构全部导入到数据库中的功能. JSON的特点是支持层级结构.支持数组表示的对象 .下面的示例介绍如何将JSON的省市县数据保存到数据库中,实现原理非常简单,就是利用JSON的java工具包API,将层次结构的JSO

  • jQuery中使用each处理json数据

    eg:给传进来的ID中当其对应的值为true时,即给对应的ID标签添加一个class 名为  focus,如: var obj = { id01:'true', id02:'flase', id03:'true'}; $.each(obj,function(key,val){ if(val == 'true'){ $('#' + key).addClass('focus'); } }); 结果:ID为id01及id03的标签会添加一个class标签: eg2: json数据如下: [ {"Id&

随机推荐