做爲WEB程序員,咱們常常與表單打交道。例如在經過表單編輯一些數據時,讀取後臺數據並填充到表單是一件繁瑣的事情,尤爲是表單域不少並且包含radio,checkbox,select等的時候。你必定見過下面的代碼: php
<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: 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的實現很簡單,封裝成函數後能夠在任何地方使用,請看代碼: 程序員
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); } }); } }
前臺效果: 數據庫
歡迎你們與我交流,任何問題請留言! json