总结的如何把form表单提交无缝转为ajax方式提交的方法。
原先的form表单长这样：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <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> </body> </html>
要转化为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头字段
},
原文链接：https://www.qiquanji.com/post/8479.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知