form表單AJAX提交
阿新 • • 發佈:2018-12-31
參考文章:
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提交的流程
-
將form元素的屬性action和method去掉,新增id=”myForm”,form元素就變為
<form id="myForm">
-
將提交按鈕的button的type=”submit”改為type=”button”,增加 id
-
在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="跳轉頁面"
}
});
});