首页 > Web开发 > 详细

form表单提交转为ajax方式提交

时间:2016-11-14 00:56:57      阅读:216      评论:0      收藏:0      [点我收藏+]

在做项目的过程中遇到要将form表单提交转为ajax方式提交,下面是我总结的如何把form表单提交无缝转为ajax方式提交的方法。

原先的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>

要转化为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方式提交

原文:http://www.cnblogs.com/bubbleStar/p/6060415.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!