【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=" 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>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <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},给出的。这就需要试验一下，两种方式最后请求的地址是什么样子的；

6.Controller中，这里需要返回数据给前台，才使用了@ResponseBody这个注解；而就算你返回是void的，不希望给前台返回值，也需要@ResponseBody。不然，spring会认为你要去找那一串地址，会无休止的找下去，就会报错。

 

这里接着说：

上面那个表单，数据量很小，如果提交的是个大表单，那么就不能采用上面这种ajax的写法了，而是：

 var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 });

使用jQuery中最原始的ajax的写法，这样就可以保证大量的数据传递给后台了。