PHP代码和HTML分离

PHP代码和HTML分离

表单编辑一些数据时，读取后台数据并填充到表单是一件繁琐的事情,尤其是表单域很多而且包含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 
//从数据库读取的用户信息,需要注意的是，数组的键名应和表单域保持一致
$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的实现很简单，封装成函数后可以在任何地方使用，请看js代码：

<code class="hljs typescript"><span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">loadData</span></span></span><span class="hljs-function">(</span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">jsonStr</span></span></span><span class="hljs-function">)</span></span>{  
    <span class="hljs-keyword">var</span> obj = <span class="hljs-built_in">eval</span>(<span class="hljs-string">"("</span>+jsonStr+<span class="hljs-string">")"</span>);  
    <span class="hljs-keyword">var</span> key,value,tagName,<span class="hljs-keyword">type</span>,arr;  
    <span class="hljs-keyword">for</span>(x <span class="hljs-keyword">in</span> obj){  
        key = x;  
        value = obj[x];  
          
        $(<span class="hljs-string">"[name='"</span>+key+<span class="hljs-string">"'],[name='"</span>+key+<span class="hljs-string">"[]']"</span>).each(<span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function">(</span><span class="hljs-params"></span><span class="hljs-function"><span class="hljs-params"></span>)</span></span>{  
            tagName = $(<span class="hljs-keyword">this</span>)[<span class="hljs-number">0</span>].tagName;  
            <span class="hljs-keyword">type</span> = $(<span class="hljs-keyword">this</span>).attr(<span class="hljs-string">'type'</span>);  
            <span class="hljs-keyword">if</span>(tagName==<span class="hljs-string">'INPUT'</span>){  
                <span class="hljs-keyword">if</span>(<span class="hljs-keyword">type</span>==<span class="hljs-string">'radio'</span>){  
                    $(<span class="hljs-keyword">this</span>).attr(<span class="hljs-string">'checked'</span>,$(<span class="hljs-keyword">this</span>).val()==value);  
                }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-keyword">type</span>==<span class="hljs-string">'checkbox'</span>){  
                    arr = value.split(<span class="hljs-string">','</span>);  
                    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i =<span class="hljs-number">0</span>;i<arr.length;i++){  
                        <span class="hljs-keyword">if</span>($(<span class="hljs-keyword">this</span>).val()==arr[i]){  
                            $(<span class="hljs-keyword">this</span>).attr(<span class="hljs-string">'checked'</span>,<span class="hljs-literal">true</span>);  
                            <span class="hljs-keyword">break</span>;  
                        }  
                    }  
                }<span class="hljs-keyword">else</span>{  
                    $(<span class="hljs-keyword">this</span>).val(value);  
                }  
            }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(tagName==<span class="hljs-string">'SELECT'</span> || tagName==<span class="hljs-string">'TEXTAREA'</span>){  
                $(<span class="hljs-keyword">this</span>).val(value);  
            }  
              
        });  
    }  
}</code>