使用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.formautofill 表单填充控件

  • 2017年03月14日 15:52
  • 133KB
  • 下载

巧用jQuery选择器写表单办法总结(提高效率)

相信很多小伙伴都会遇到需要做表单的需求,就像我现在做的医院项目,茫茫多的表单无穷无尽。一开始做表单使用最笨的方法:一个个span去定义ID,每个数据都用ajax获取后赋值显示,然后在表单提交前一个个用...
  • violetjack0808
  • violetjack0808
  • 2016年08月16日 15:33
  • 2405

javaScript 填充表单值的方法

//填充表单 this.populateForm = function(formId, data){ for(var attr in data){ var formField = $("#...
  • u011659172
  • u011659172
  • 2016年05月04日 11:04
  • 879

将后台返回的 json 对象快速填充到表单

/**  * 将后台返回的 json 对象快速填充到表单  * @param jsonStr   */ function loadData(jsonStr){     var obj = j...
  • huxing998
  • huxing998
  • 2016年02月17日 15:26
  • 412

用Jquery实现自动填充

//js前台代码 google function findValue(li){ if(...
  • a6225301
  • a6225301
  • 2013年05月23日 10:52
  • 5088

将后台JSON数据填充Form表单

$.fn.populateForm = function(data){ return this.each(function(){ var formElem, name; ...
  • danmo1993
  • danmo1993
  • 2016年11月18日 15:04
  • 2495

JQuery动态创建表单并提交

在前端开发中,经常会碰到需要动态创建一个Form并提交的情况,下面就演示一下如何使用JQuery来动态创建一个表单并提交。 // 捕捉链接的点击事件 $('#btn').click(function...
  • WitsMakeMen
  • WitsMakeMen
  • 2014年03月11日 10:55
  • 34086

jquery动态实现填充下拉框

项目需要实现一个功能 当点下拉框时动态加载后台数据。 这是后台数据 protected void doPost(HttpServletRequest request, HttpServletRespo...
  • gundumw100
  • gundumw100
  • 2017年04月10日 17:52
  • 730

jquery实现自动添加table表格及内容

//table 实现tabe表格中tr td的自动添加 table{ width:500px; border:1px solid #FFF; border-collapse:...
  • xi_weina
  • xi_weina
  • 2012年03月22日 20:15
  • 9559

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

题记:最近做关于OpenDaylight的项目,然还用到了一些前端和javaee的相关技术,本代码实现的是通过数据库部分读到的json数据,数据库部分没有写出,填充到table表格中,并且也可以实现t...
  • u011563903
  • u011563903
  • 2015年07月08日 11:05
  • 6738
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jQuery将数据快速填充到表单
举报原因:
原因补充:

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