使用jQuery將數據快速填充到表單

做爲WEB程序員，咱們常常與表單打交道。例如在經過表單編輯一些數據時，讀取後臺數據並填充到表單是一件繁瑣的事情,尤爲是表單域不少並且包含radio，checkbox，select等的時候。你必定見過下面的代碼：

<select name="area">
	<option value="nankai" <?php if($area=='nankai') echo 'selected="selected"';?>>南開區</option>
	<option value="hexi" <?php if($area=='hexi') echo 'selected="selected"';?>>河西區</option>
	<option value="xiqing" <?php if($area=='xiqing') echo 'selected="selected"';?>>西青區</option>
</select>

PHP和HTML混在一塊兒很是亂，因而我想到用jQuery來優化這一過程，將PHP代碼和HTML分離。

請看下面的HTML：

<table>
	<tr>
		<td>姓名</td>
		<td>
			<input type="hidden" name="id" />
			<input type="text" name="name" /> 
		</td>
	</tr>
	
	<tr>
		<td>地區</td>
		<td>
			<select name="area">
				<option value="nankai">南開區</option>
				<option value="hexi">河西區</option>
				<option value="xiqing">西青區</option>
			</select>
		</td>
	</tr>
	
	<tr>
		<td>性別</td>
		<td>
			<input type="radio" name="sex" value="male" />男
			<input type="radio" name="sex" value="female" />女
		</td>
	</tr>
	
	<tr>
		<td>愛好</td>
		<td>
			<input type="checkbox" name="hobby[]" value="movie" />電影
			<input type="checkbox" name="hobby[]" value="music" />音樂
			<input type="checkbox" name="hobby[]" value="basketball" />籃球
		</td>
	</tr>
	
	<tr>
		<td>簡介</td>
		<td>
			<textarea name="intro"></textarea>
		</td>
	</tr>
	
</table>

這裏麪包含了經常使用的表單域，下面咱們從服務端讀取數據（PHP示例）：

<?php 
//從數據庫讀取的用戶信息,須要注意的是，數組的鍵名應和表單域保持一致
$user = array(
	'id'=>1,
	'name'=>'張三',
	'area'=>'hexi',
	'sex'=>'male',
	'hobby'=>'music,movie',
	'intro'=>'你好，世界'
);

//將數組序列化爲json字符串
$json = json_encode($user);

?>

使用下面的代碼便可將數據填充到表單：

//將PHP生成的json字符串賦值給js變量
var user = '<?php echo $json;?>';

$(function(){

	//將數據加載到表單中
	loadData(user);

});

loadData的實現很簡單，封裝成函數後能夠在任何地方使用，請看代碼：

function loadData(jsonStr){
	var obj = eval("("+jsonStr+")");
	var key,value,tagName,type,arr;
	for(x in obj){
		key = x;
		value = obj[x];
		
		$("[name='"+key+"'],[name='"+key+"[]']").each(function(){
			tagName = $(this)[0].tagName;
			type = $(this).attr('type');
			if(tagName=='INPUT'){
				if(type=='radio'){
					$(this).attr('checked',$(this).val()==value);
				}else if(type=='checkbox'){
					arr = value.split(',');
					for(var i =0;i<arr.length;i++){
						if($(this).val()==arr[i]){
							$(this).attr('checked',true);
							break;
						}
					}
				}else{
					$(this).val(value);
				}
			}else if(tagName=='SELECT' || tagName=='TEXTAREA'){
				$(this).val(value);
			}
			
		});
	}
}

前臺效果：

大功告成，我沒有在表單域中寫任何PHP代碼，實現了代碼分離，看起來是否是清爽多了~？

歡迎你們與我交流，任何問題請留言！