form表單提交轉為ajax方式提交
阿新 • • 發佈:2018-05-13
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方式提交