【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>
                               &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的写法，这样就可以保证大量的数据传递给后台了。