ajax提交form表单实现方法

时间:6年前   阅读:4970

总结的如何把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,我们将及时处理。

微信扫码关注

更新实时通知

上一篇:50ETF期权卖方交易方法

下一篇:怎么选择适合你的期权合约?

网友评论

请先 登录 再评论,若不是会员请先 注册