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{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>

 

 

时间: 2024-09-21 05:48:42

javascript:json数据的页面绑定的相关文章

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

 本篇文章主要是对javascript:json数据的页面绑定示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 web开发中,如果需要将"服务端返回的json对象"绑定到"现有页面上的dom元素",传统赋值的方式太繁琐,写起来也很累(特别是json对象很大时),于是想出了下面的偷懒方法,不过有二个前提:   1.元素的id要与json对象中的属性命名一致 2.json对象中的属性名,最好不要重复    代码如下: <!doctype html&

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

web开发中,如果需要将"服务端返回的json对象"绑定到"现有页面上的dom元素",传统赋值的方式太繁琐,写起来也很累(特别是json对象很大时),于是想出了下面的偷懒方法,不过有二个前提: 1.元素的id要与json对象中的属性命名一致2.json对象中的属性名,最好不要重复 复制代码 代码如下: <!doctype html><html><head><title>json对象遍历演示</title>&

json-图片上传返回JSON数据,前台弹出下载保存文件框, 文件里面是JSON数据,页面上没显示图片怎么解决

问题描述 图片上传返回JSON数据,前台弹出下载保存文件框, 文件里面是JSON数据,页面上没显示图片怎么解决 10C @RequestMapping(value = ""kinduploadfile"" method = RequestMethod.POST) public @ResponseBody JSONObject KindUploadFile(HttpServletRequest requestHttpServletResponse response)

easyui-使用easyUI tree 绑定JSON数据,会无限绑定。。。

问题描述 使用easyUI tree 绑定JSON数据,会无限绑定... 如图...这是其中一组Json 明明children已经没有东西了啊 解决方案 你动态加载的要自己依据tree传递的展开节点id到服务器,需要依据id控制输出的内容,没有子节点就不要添加state数据,要不会当做父节点 解决方案二: jqGrid绑定Json数据

javascript json数据验证函数

这段代码可以验证手机,邮箱,QQ,电话,IP,数据,汉字,用户名合法性,邮箱等哦. var fk; var mode; validator={  errinput : 'errinput',  errmsg : 'errmsg',  errcls : 'no',  yescls : 'yes',  require : /[^(^s*)|(s*$)]/,  email : /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/,  phone : /^(((d{2,3})

mvc-Spring MVC 拼接json后,页面跳转并传json数据

问题描述 Spring MVC 拼接json后,页面跳转并传json数据 从页面A传入参数,在spring controller 中拼接成json数据,怎样跳转到页面B,并同时传递拼接成的json数据? 代码如下: @RequestMapping(value = "/saleout/precheck", method = RequestMethod.GET) //初次查询 public @ResponseBody Map<String,Object> precheckSto

javascript-静态页面使用ajax获取后台传递的Json数据

问题描述 静态页面使用ajax获取后台传递的Json数据 项目中需要用到javascript获取后台传回来的Json数据,需要使用了ajax,页面是自动生成的静态页面,不能够使用到js框架,有办法么? 解决方案 ssh 中 jquery ajax 调用action返回的json数据并传递到页面Struts2结合jquery使用Ajax传递Json数据jsp页面使用json后台数据 解决方案二: 静态页面为什么不能用js,两者根本不矛盾的事情. 解决方案三: 你的意思是不能导入框架的js文件是吗

在JavaScript中使用JSON数据_javascript技巧

JSON 是 JavaScript 原生格式,这意味着 在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包. JSON语法 JSON建构于两种结构: 对象--名称/值对的集合.不同的语言中,它被理解为对象,纪录,结构,字典,哈希表,有键列表(keyed list),或者关联数组.一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"(冒号):"'名称/值' 对

struts返回json数据后,还能在页面上用S标签迭代吗

问题描述 struts返回json数据后,还能在页面上用S标签迭代吗 如果不是返回json的话,我就可以用等标签来绑定数据.但是如果返回的是json的 话,感觉S标签就废掉了...请问还有方法可以再用到吗 解决方案 如果你是返回Json格式的数据的话,那你应该就是用ajax异步来操作的,这样异步操作的返回内容,交给Js去处理就好了, 你用这种方法,response不可能将返回的信息直接带到页面中,怎么用S标签进行处理啊~ 不过你可以上网搜一下:struts2的具有ajax功能的标签.可能能满足你