我们在做ajax 效果的时候，经常遇到类似的需求：从后台返回一个对象。一般是json格式的对象。 这时候需要将对象内容自动填充到页面中。
闲话少聊，下面是代码。
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>根据对象填充到对象的form中</title>
<script type="text/javascript" src="js/jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 初始化一个对象 该对象的属性要和form 对应的值对应
var obj = new Object();
obj.username ="randy";
obj.book="01,02";
obj.sex="girl";
obj.color="red";
obj.addition="哥写的不是代码，是寂寞";
$(":button").click(function(){
for(var attr in obj){
if(typeof(obj[attr])=='function'){
continue;
}
var $input = $("#myform :input[name='"+attr+"']");
var type = $input.attr("type");
if(type=="checkbox" ||type=="radio"){
var avalues = obj[attr].split(",");
for(var v=0; v<avalues.length;v++){
$input.each(function(i,n){
var value = $(n).val();
if(value == avalues[v]){
$(n).attr("checked","checked");
}
});
}
}else{
$input.val(obj[attr]);
}
}
/* var $input = $("#myform :input");
$.each($input,function(i,n){
var type = $(n).attr("type");
alert(type);
});
*/
});
});
</script>
</head>
<body>
<form id="myform" method="get">
<table width="50%" border="0">
<tr>
<td>
姓名： </td>
<td>
<input type="text" name="username" /></td>
</tr>
<tr>
<td>
书籍： </td>
<td>
<input type="checkbox" name="book" value="01"/>
jquery
<input type="checkbox" name="book" value="02"/>
java
<input type="checkbox" name="book" value="03"/>
oracle </td>
</tr>
<tr>
<td>
性别： </td>
<td>
<label>
<input type="radio" name="sex" value="boy" />
男</label>
<label>
<input type="radio" name="sex" value="girl" />
女</label> </td>
</tr>
<tr>
<td>
颜色： </td>
<td> <label for="select"></label>
<select name="color" id="select">
<option>请选择</option>
<option value="red">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
</select> </td>
</tr>
<tr>
<td>
备注： </td>
<td>
<label for="textarea"></label>
<textarea name="addition" ></textarea> </td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="padding" value="填充"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>根据对象填充到对象的form中</title>
<script type="text/javascript" src="js/jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 初始化一个对象 该对象的属性要和form 对应的值对应
var obj = new Object();
obj.username ="randy";
obj.book="01,02";
obj.sex="girl";
obj.color="red";
obj.addition="哥写的不是代码，是寂寞";
$(":button").click(function(){
for(var attr in obj){
if(typeof(obj[attr])=='function'){
continue;
}
var $input = $("#myform :input[name='"+attr+"']");
var type = $input.attr("type");
if(type=="checkbox" ||type=="radio"){
var avalues = obj[attr].split(",");
for(var v=0; v<avalues.length;v++){
$input.each(function(i,n){
var value = $(n).val();
if(value == avalues[v]){
$(n).attr("checked","checked");
}
});
}
}else{
$input.val(obj[attr]);
}
}
/* var $input = $("#myform :input");
$.each($input,function(i,n){
var type = $(n).attr("type");
alert(type);
});
*/
});
});
</script>
</head>
<body>
<form id="myform" method="get">
<table width="50%" border="0">
<tr>
<td>
姓名： </td>
<td>
<input type="text" name="username" /></td>
</tr>
<tr>
<td>
书籍： </td>
<td>
<input type="checkbox" name="book" value="01"/>
jquery
<input type="checkbox" name="book" value="02"/>
java
<input type="checkbox" name="book" value="03"/>
oracle </td>
</tr>
<tr>
<td>
性别： </td>
<td>
<label>
<input type="radio" name="sex" value="boy" />
男</label>
<label>
<input type="radio" name="sex" value="girl" />
女</label> </td>
</tr>
<tr>
<td>
颜色： </td>
<td> <label for="select"></label>
<select name="color" id="select">
<option>请选择</option>
<option value="red">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
</select> </td>
</tr>
<tr>
<td>
备注： </td>
<td>
<label for="textarea"></label>
<textarea name="addition" ></textarea> </td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="padding" value="填充"/>
</td>
</tr>
</table>
</form>
</body>
</html>
下面是效果图：就是将 js中创建的对象属性，填充到对应的控件中。
逻辑很简单。
本文转自 randy_shandong 51CTO博客，原文链接：http://blog.51cto.com/dba10g/281514，如需转载请自行联系原作者
