• 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{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>
    
    
  • 相关阅读:
    Hdu 1257最少拦截系统
    删除mysql__转
    sql 入门的小例子熟悉一下_这可是一个转转转贴 :)
    header 用法_转
    java_json 转换 文件在file中
    javascript_php 正则匹配 转
    mysql 忘记密码转_kinghu
    php 通用下载
    明天就是新年开始
    翻译 有助于程序命名
  • 原文地址:https://www.cnblogs.com/yjmyzz/p/2289725.html
Copyright © 2020-2023  润新知