javascript:json数据的页面绑定
2011-12-16 08:40
555 查看
web开发中,如果需要将“服务端返回的json对象”绑定到“现有页面上的dom元素”,传统赋值的方式太繁琐,写起来也很累(特别是json对象很大时),于是想出了下面的偷懒方法,不过有二个前提:
1、元素的id要与json对象中的属性命名一致
2、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>
相关文章推荐
- javascript:json数据的页面绑定示例代码
- javascript:json数据的页面绑定示例代码
- 在子页面用javascript改变父页面的dropdownlist的选择项后在父页面重新绑定数据
- javascript应用:页面解析list和map封装后的json数据
- javascript数据绑定在页面上显示lodash
- tab切换页面+cookie跳过登录页面+json解析+tree Weight绑定json数据
- ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目
- json返回数据,怎么绑定到页面
- jsp页面根据json数据动态生成table
- BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)
- 父页面与之页面(jquery获取tr中某控件值(绑定数据))
- python实现的json数据以HTTP GET,POST,PUT,DELETE方式页面请求
- C#将datatable生成easyui的绑定tree 的json数据格式
- Struts2与Json 在JSP页面数据交互传递
- flex :读取access数据库数据 转化为xml 然后在flex页面显示绑定图片
- Atitit.列表页面and条件查询的实现最佳实践(1)------设置查询条件and提交查询and返回json数据
- JQuery.getJSON 从aspx页面返回JSON数据
- 将后台数据(C#)转换成JSON字符串传到页面转换成json对象存储在JS中
- javascript解析json数据-简单演示
- javascript中json的去重复、统计、排序、数据整理问题案例介绍