1. 程式人生 > >form表單提交轉為ajax方式提交

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

clas modal 通過 fault IT pre submit sub 方式

<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頭字段
},

  

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