Javascript数据的页面绑定示例代码

在开发Web时,如果需要将从服务器返回的JSON对象绑定到现有页面上的DOM元素,那么传统的分配方式太麻烦了,太累了,无法编写。特别是当JSON对象非常大时,下面出现了一些懒惰的方法,但是有两个前提:

1,元素的ID与JSON对象中的属性命名一致。
2,JSON对象中的属性名称,最好不要重复
复制代码代码如下所示:



JSON对象遍历演示

var obj = {:步骤,B:'b1,C:{ C1:'c1},D:1,电子邮件:真的,F:新的日期(2012 / 12 / 24)};

/ / showjsonproperty(obj);
*
功能showjsonproperty(jsonobj){
For (VaR o in jsonObj) {
警报(属性名称+ o.tostring()+
如果(typeof(jsonobj {哦})= =对象)
{
showjsonproperty(jsonobj {哦});
}
}
}
* /

功能bindjson(jsonobj){
对于(var o jsonobj){
无功domobj = document.getelementbyid(o.tostring());
如果(domobj!=未定义的){
domobj。值= jsonobj toString(){哦};
}
如果(typeof(jsonobj {哦})= =对象)
{
BindJson(jsonobj {哦});
}
}
}
功能binddata(){
BindJson(obj);
}


输入{宽80px;身高:18px;保证金:0 10px 00;边境:1px # 999固体}
输入:悬停{边界:1px # FF0000固体}
输入{类型=按钮} {背景颜色:# efefef;身高:22px;}




一个:

B:

c.c1:

D:

E:

F: