【ajax 提交表单】多种方式的注意事项 ,serialize()的使用

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

在业务中，可能因为表单内容过于庞大，字段过于繁杂，如果人为去拼接的话，需要耗费大量的时间和精力，与此同时，代码看上去也是冗余不堪。

所以，提交表单的时候如果能整个表单数据整体提交，那是非常开心的事情。

同时，有时候会有需求在前台提交给后台数据之后，希望后台能在处理之后返回数据给前台，可能是标识也好，可能是具体的数据也罢。

这时候又需要使用ajax去提交数据。【因为使用jQuery的submit()方法是没有回调函数的，那个函数只是当表单发生提交时，要同时执行的函数而已，例如：$("#poFromId").submit()】

那能不能使用ajax进行局部页面刷新的同时将整个表单的数据提交呢？

答案肯定是可以的，

首先，咱们把整个的一圈代码给出来：

1.jsp页面

<form action="../department/addPosition.htmls" method="post" role="form" id="poFromId" >
<div class="form-group">
<label class="col-md-3 control-label">职位名称</label>
<div class="col-md-9" style="width: 77%">
<input type="hidden" name="positionId" />
<input type="hidden" name="positionCre" />
<input type="text" class="form-control" name="positionName" placeholder="eq:软件开发工程师" data-bv-trigger="keyup" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">职位所属等级</label>
<select class="selectpicker input input-big" name="positionGrade">
<option value="专员">专员</option>
<option value="经理">经理</option>
<option value="总监">总监</option>
</select>
</div>
<hr/>
<div class="form-group center">
<button type="button" class="btn btn-success positionUp">提交职务</button>
         
<button type="reset" class="btn btn-warning">重置页面</button>
</div>
</form>

2.js 表单整体使用ajax提交部分

/**
* 提交职位
*/
$(".positionUp").click(function(){
$("input[name='positionId']").val(UUID());
$("input[name='positionCre']").val(parent.departmentId);
var position = $("#poFromId").serialize(); $.getJSON("../department/addPosition.htmls?"+position,function(data){
if(data){
layer.msg('添加成功', {
icon: 1,
time: 2000
}, function(){
});
parent.layer.close(parent.positionAdd);
}
}); });

3.controller后台接收部分

@RequestMapping("addPosition")
@ResponseBody
public boolean addPosition(Position position){
position.setCreateDate(new Timestamp(System.currentTimeMillis()));
position.setUpdateDate(new Timestamp(System.currentTimeMillis()));
//操作人未插入
positionService.save(position); return true;
}

4.上面表单中name对应的实体Position

package com.agen.entity; import java.sql.Timestamp;
import java.util.HashSet;
import java.util.Set; import javax.persistence.CascadeType;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.OneToMany;
import javax.persistence.Table; import org.hibernate.annotations.GenericGenerator; import com.fasterxml.jackson.annotation.JsonIgnoreProperties; /**
* Position 岗位表
*/
@Entity
@Table(name = "position", catalog = "performance")
@JsonIgnoreProperties(value = {"positionchanges"})
public class Position implements java.io.Serializable { // Fields private String positionId;
private String positionName; //岗位名称
private String positionGrade; //岗位对应等级
private Timestamp createDate;
private Timestamp updateDate;
private String operation;
private String positionCre; //岗位所属部门
private Set<Positionchange> positionchanges = new HashSet<Positionchange>(0); // Constructors /** default constructor */
public Position() {
} /** full constructor */
public Position(String positionName, String positionGrade,
Timestamp createDate, Timestamp updateDate, String operation,
String positionCre, Set<Positionchange> positionchanges) {
this.positionName = positionName;
this.positionGrade = positionGrade;
this.createDate = createDate;
this.updateDate = updateDate;
this.operation = operation;
this.positionCre = positionCre;
this.positionchanges = positionchanges;
} // Property accessors
//@GenericGenerator(name = "generator", strategy = "uuid.hex")
@Id
//@GeneratedValue(generator = "generator")
@Column(name = "positionID", unique = true, nullable = false, length = 36)
public String getPositionId() {
return this.positionId;
} public void setPositionId(String positionId) {
this.positionId = positionId;
} @Column(name = "positionName", length = 30)
public String getPositionName() {
return this.positionName;
} public void setPositionName(String positionName) {
this.positionName = positionName;
} @Column(name = "positionGrade", length = 20)
public String getPositionGrade() {
return this.positionGrade;
} public void setPositionGrade(String positionGrade) {
this.positionGrade = positionGrade;
} @Column(name = "createDate", length = 0)
public Timestamp getCreateDate() {
return this.createDate;
} public void setCreateDate(Timestamp createDate) {
this.createDate = createDate;
} @Column(name = "updateDate", length = 0)
public Timestamp getUpdateDate() {
return this.updateDate;
} public void setUpdateDate(Timestamp updateDate) {
this.updateDate = updateDate;
} @Column(name = "operation", length = 36)
public String getOperation() {
return this.operation;
} public void setOperation(String operation) {
this.operation = operation;
} @Column(name = "positionCre", length = 500)
public String getPositionCre() {
return this.positionCre;
} public void setPositionCre(String positionCre) {
this.positionCre = positionCre;
} @OneToMany(cascade = CascadeType.ALL, fetch = FetchType.LAZY, mappedBy = "position")
public Set<Positionchange> getPositionchanges() {
return this.positionchanges;
} public void setPositionchanges(Set<Positionchange> positionchanges) {
this.positionchanges = positionchanges;
} }

接下来，咱们要细细谈一谈这上面需要注意的小细节：

1.首先，如果你想使用js控制提交整个表单，那最起码的，页面中不能存在元素的name=submit的，当然最下面的提交按钮也不能使用type=submit了，因为你想在js中处理之后再去使用js提交表单数据嘛！！

2.其次，js中，获取整体的表单数据，使用了var position = $("#poFromId").serialize();序列化的方法去获取整个表单的数据！！

3.再者说，既然你讲前后台表单数据传输交给spring去管理了，那最起码的要求，你得在form表单中将实体中规定不能为null的字段值都给上，同样的，如果你想前台传递给后台，后台直接拿到的就是一个字段都比较完整的实体对象，那表单中的name就要尽量多的和实体中的字段值保持一致；

4.对于第3点中，可能会出现，实体中的某个属性也是个实体，例如：【注册的时候，User实体需要选择是哪个部门的，而Department实体在注册页面上，也就是个下拉框，也就是个departmentId而已，对于这种情况，我们可以将name设置为其他的，在后台单独接收这个name对应的值，然后将departmentId实例化成Department对象，再赋值给User实体】

5.注意ajax中，data部分是：$.getJSON("../department/addPosition.htmls?"+position,拼接的，而不是$.getJSON("../department/addPosition.htmls",{position:position},给出的。这就需要试验一下，两种方式最后请求的地址是什么样子的；