使用jQuery将数据快速填充到表单

转载 2016年08月31日 13:59:28
  • http://my.oschina.net/crazymus/blog/345586
  •  使用jQuery将数据快速填充到表单
    • 发布时间: 2014/11/17 16:32 
    • 阅读: 6870 
    • 收藏: 14 
    • 点赞: 0 
    • 评论: 1

    作为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);
    			}
    			
    		});
    	}
    }

    前台效果:


相关文章推荐

用Jquery实现自动填充

//js前台代码 google function findValue(li){ if(...

JavaScript对于Form的序列化和填充数据

1、html页面代码 用户名: 密码: 2、关于JavaScript对于Form的序列化和填充数据的封装 var util = { serializ...

将后台JSON数据填充Form表单

$.fn.populateForm = function(data){ return this.each(function(){ var formElem, name; ...

jquery实现json数据填充到table表格中并且实现remove add 数据

题记:最近做关于OpenDaylight的项目,然还用到了一些前端和javaee的相关技术,本代码实现的是通过数据库部分读到的json数据,数据库部分没有写出,填充到table表格中,并且也可以实现t...

json对象load到表单中,这样后台Ajax过来的数据就可以直接加载

废话不多说,直接上代码,javascript的。 /** * 加载json的数据到页面的表单中,以name为唯一标示符加载 * @param {String} jsonSt...
  • Sychel
  • Sychel
  • 2015-11-27 16:24
  • 1782

jQuery通过ajax获得后台json数据给form表单赋值

jQuery提供了load方法可以将数据加载到页面form表单中,但有时候我需要获取后台json数据中某个值时,又需要赋值整个form表单,load方法没有回调函数所以就不行了,如果用ajax调用的话...

使用Jquery的Ajax异步提交有二进制数据的表单实现方案

1. 用H5的FormData对象来构造表单数据: var form = $("#form")[0]; var formData = new FormData(form); 2.contentTy...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)