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 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
javascript cookies操作集合
Apr 12 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
JS实现简单抖动效果
Jun 01 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 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
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
PHP四大安全策略
2014/03/12 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Python 私有函数的实例详解
2017/09/11 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
python中os.remove()用法及注意事项
2021/01/31 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
印度在线杂货店:bigbasket
2018/08/23 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
军训自我鉴定怎么写
2014/02/13 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
保密工作承诺书
2014/08/29 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
检讨书怎么写
2015/01/23 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
元旦主持词开场白
2015/05/29 职场文书
python入门之算法学习
2021/04/22 Python