【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的寫法，這樣就可以保證大量的數據傳遞給后台了。