javascript:json数据的页面绑定示例代码


Posted in Javascript onJanuary 26, 2014

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>
Javascript 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
jQuery focus和blur事件的应用详解
Jan 26 #Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 #Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 #Javascript
使用javascript为网页增加夜间模式
Jan 26 #Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 #Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 #Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 #Javascript
You might like
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
js更优雅的兼容
2010/08/12 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
python处理大数字的方法
2015/05/27 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
python实现多线程网页下载器
2018/04/15 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
浅谈Python中的模块
2020/06/10 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
python 简单的调用有道翻译
2020/11/25 Python
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
50道外企软件测试面试题
2014/08/18 面试题
酒店人事专员岗位职责
2013/12/19 职场文书
上班上网检讨书
2014/01/29 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
小学学校评估方案
2014/06/08 职场文书
结对共建协议书
2014/08/20 职场文书
如何写早恋检讨书
2014/09/10 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
2014年工商所工作总结
2014/12/09 职场文书
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python
Redis keys命令的具体使用
2022/06/05 Redis