form表單提交轉為ajax方式提交

在做項目的過程中遇到要將form表單提交轉為ajax方式提交，下面是我總結的如何把form表單提交無縫轉為ajax方式提交的方法。

原先的form表單長這樣：

<form action="xxx" method="get">  //action的值是請求的url地址
    <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" class="form-control" name="name">
    </div>
    <div class="form-group">
        <label for="jobNumber">工號</label>
        <input type="number" class="form-control" name="jobNumber">
    </div>
    <div class="form-group">
        <label for="nation">民族</label>
        <input type="text" class="form-control" name="nation">
    </div>
    <div class="form-group">
        <label for="gender">性別</label>
        <input type="text" class="form-control" name="gender">
    </div>
    <div class="modal-footer">
    　<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
　　　<button type="submit" class="btn btn-primary">提交</button>　
    </div>
</form> 

要轉化為ajax方式提交，需要做以下幾個改變：

1. 將form元素的屬性action和method去掉，添加id="myForm",form元素就變為<form id="myForm">

2. 將提交按鈕的button的type="submit"改為type="button"

3. 在js文件中寫入

$(function(){
    $.ajax({
    type : "GET",
    url : "xxx",   
    success : function (data) {
         console.log(data);   //data即為后台返回的數據
    }
});

這樣，就可以愉快地將form表單提交的方式轉為ajax請求的方式啦。

PS:如果想要在ajax請求中加入自定義的HTTP header，則在ajax請求中加入

beforeSend: function(request) {
　　request.setRequestHeader("Content-type", "application/json");  
   //通過這種方法可以設置自定義HTTP頭字段
},