1. 程式人生 > >form表單AJAX提交

form表單AJAX提交

參考文章:

http://blog.csdn.net/qq_28877125/article/details/75907422

http://blog.csdn.net/it_cookie_sam/article/details/52722881

一般來說form表單提交在前期學習,會是這個樣子的

原來的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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

修改之前,在後臺獲取提交的資料,獲取的是表中的name值,下面是個例子

大致的內容如下:

<form action="xxxxxxx.do" >
<input name="name" value="哈哈"/>
<input type="submit" value="提交"/>
</form>
這個form提交請求後,在你的action中
String name = request.getparameter("name"); 
那麼name的值就是“哈哈”

修改成AJAX提交的流程

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

  2. 將提交按鈕的button的type=”submit”改為type=”button”,增加 id

  3. 在js檔案中寫入

 $("#按鍵的id").click(function () {
    $.ajax({  
            type: "POST",   //提交的方法
            url:"/home/request", //提交的地址  
            data:$('#fm').serialize(),// 序列化表單值  
            async: false,  
            error: function(request) {  //失敗的話
                 alert("Connection error");  
            },  
            success: function(data) {  //成功
                 alert(data);  //就將返回的資料顯示出來
                 window.location.href="跳轉頁面"  
            }  
         });
       });