jsp form 自動填充
我們在做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中創建的對象屬性，填充到對應的控件中。
邏輯很簡單。
本文出自 「簡單」 博客，請務必保留此出處http://randy2009.blog.51cto.com/764602/281514