form表单根据name 将其提交内容转成json数据对象与实体类对应

本文介绍了一个使用HTML和JavaScript实现的表单示例，包括基本的表单元素如输入框、下拉菜单等，并展示了如何将表单数据序列化为JSON格式以便于提交到服务器。此外还提供了一个简单的后端接口用于接收这些数据并进行处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.form表单代码

<form id="form"> 
				<table class="table-edit"  style="border-collapse:separate; border-spacing:0px 10px;" width="95%" align="center">
					<tr class="title">
						<td colspan="4">基本信息</td>
					</tr>
					<tr>
						<td>用户名:</td>
						<td>
						    <input type="hidden" name="id" id="uid"/>
							<input type="text" name="userName" id="username"  />
						</td>
						<td>密码:</td>
						<td>
							<input type="password" name="password" id="password"  />
						</td>
					</tr>
					<tr>
						<td>真实姓名:</td>
						<td>
							<input type="text" name="realName" id="realname"   />
						</td>
						<td>生日:</td>
						<td>
							<input type="text" name="birthday" id="birthday"  />
						</td>
					</tr>				
					<!-- <tr>
						<td>性别:</td>
						<td>
							<select name="gender" id="gender" class="easyui-combobox" style="width: 150px;">
								<option value="">请选择</option>
								<option value="男">男</option>
								<option value="女">女</option>
							</select>
						</td>
						<td>单位:</td>
						<td>
							<select name="station" id="station" class="easyui-combobox" style="width: 150px;">
								<option value="">请选择</option>
								<option value="总公司">总公司</option>
								<option value="分公司">分公司</option>
								<option value="厅点">厅点</option>
								<option value="基地运转中心">基地运转中心</option>
								<option value="营业所">营业所</option>
							</select>
						</td>
					</tr> -->
					<tr>
						<td>性别:</td>
						<td>
							<input type="text" name="sex" id="sexName"  />
						</td>
						<td>单位:</td>
						<td>
							<input type="text" name="uint" id="uintName" />
						</td>
					</tr>
					<tr>
						<td>联系电话</td>
						<td colspan="3">
							<input type="text" name="telephone" id="telephone"  />
						</td>
					</tr>
					<tr>
						<td>角色:</td>
						<td id="roleTD" colspan="3">
						
						</td>
					</tr>
					<tr>
						<td>备注:</td>
						<td colspan="3">
							<textarea id="area" style="width:80%"></textarea>
						</td>
					</tr>
				</table>
			</form>

2.进行数据提交

   var user1=$("#form").serializeObject();	
   user1.id=id;
   console.log(user1)
   var user=JSON.stringify(user1);
     $.ajax({
		            url:'../../web/xx/saveUser.do',
		            type:"POST",
		            contentType:"application/json",  //缺失会出现URL编码，无法转成json对象
		            data :user,
		            //的serialize()方法通过序列化表单值，创建URL编码文本字符串，我们就可以选择一个或多个表单元素，也可以直接选择form将其序列化，
		            success:function(data){
		                alert("成功");
		               
		            }
		        });

3.json数据封装的方法

$.fn.serializeObject = function() {  
				    var o = {};  
				    var a = this.serializeArray();  
				    $.each(a, function() {  
				        if (o[this.name]) {  
				            if (!o[this.name].push) {  
				                o[this.name] = [ o[this.name] ];  
				            }  
				            o[this.name].push(this.value || '');  
				        } else {  
				            o[this.name] = this.value || '';  
				        }  
				    });  
				    return o;  
				}

4.进行数据的保存

/**
	 * 新增用户信息
	 * @param user
	 * @return
	 */
	@RequestMapping("saveUser")
	public ParameterObject saveUser(@RequestBody User  user){
		ParameterObject result=new ParameterObject();
		//保存用户信息
		user.setRegistTime(new Date());
		user.setLoginCount(0);
		//return result;
		try {

			boolean saveEntity = userService.saveEntity(user);
			result.flag(saveEntity);
			result.msg("保存成功");
		} catch (Exception e) {
			// TODO Auto-generated catch block
			result.flag(false);
			result.msg("保存失败");
			e.printStackTrace();
		}
		return result;
	}