javascript:json数据的页面绑定

菩提树下的杨过

发布于 2018-01-24 02:37:33

1.2K00

代码可运行

文章被收录于专栏：菩提树下的杨过菩提树下的杨过

运行总次数：0

代码可运行

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>