AJAX 提交表格 POST 变成 GET 的原因

yuli 2020年1月23日13:11:32前端技术 JS/jQuery评论331阅读模式

书山有路勤为径,学海无涯苦作舟。在码农的世界里从来不会有永远的正确答案。

之前在修改代码的时候遇到一个简单但是又把我搞复杂的问题,在一个 form 表格提交的时候,我用了 js 来提交表格,但是在提交的时候,总是变成 get 提交,导致后端收不到 post 数据。各种百度各种查,对照了一下自己的代码,有的说是写错 id 没有报错,有的说是服务器重定向设置问题。。。。各种修改了还是没解决。

没办法,还是老老实实从自己的代码里挨着看吧,如果不用 js 提交,改为 input submit,没有发现问题,那么就把目标锁定在 AJAX 提交表格这个环节,附上代码,大家看

 function setdraw(){ function setdraw(){     var thisform=document.forms['AddUser'];      var   way=thisform.way.value; var   num=thisform.num.value; var   wangdian=thisform.wangdian.value;        var   uname=thisform.uname.value;        var   account=thisform.account.value;        var   price=thisform.price.value;
if(uname=='' || uname==null){            layer.msg('请输入提现人姓名');            return false;        }        if(way==''||way==null||wangdian==''||num==null||num==''||wangdian==null){            layer.msg('请完善银行信息');            return false;        }
if(account=='' || account==null){            layer.msg('请输入提现账号');            return false;        } if(price=='' || price==null){            layer.msg('请输入提现金额');            return false;        }
var post_url = $("form[name='AddUser']").attr('action');        var post_data= $("form[name='AddUser']").serialize();        $.ajax({            type: "POST",            url: post_url,            data:post_data,            dataType: "json",            success: function(data){                  layer.msg(data.msg);  //,data.url); setTimeout(function (args) { window.location.href = "{:U('Withdraw/index')}"; }, 3000);                 if(data.status==1){                    layer.msg(data.msg);  //,data.url); setTimeout(function (args) { //window.location.href = "{:U('Withdraw/index')}"; }, 3000);                 }else{                    layer.msg(data.msg);                }                           }        });  }

反反复复检查了几遍,AJAX 提交这块也没有问题啊,参数也挨着核对了,没问题。这可搞了我半天,又回过头来检查 form 这边

<form class="mui-input-group form"  name="AddUser" action="{:U('Withdraw/drawup')}"><form class="mui-input-group form"  name="AddUser" action="{:U('Withdraw/drawup')}">  <div data-v-8ecad41e="" class="van-cell van-field"><div class="van-cell__value van-cell__value--alone"><div class="van-field__body">    <input type="text" name="uname" value=""  placeholder="请输入收款人" class="van-field__control">    <div class="van-field__right-icon"><i class="van-icon van-icon-manager"><!----></i></div></div></div></div>  <div data-v-8ecad41e="" class="van-cell van-field"><div class="van-cell__value van-cell__value--alone">    <div class="van-field__body"><input type="text" placeholder="请输入银行卡号" name="num" class="van-field__control"></div></div></div>  <div data-v-8ecad41e="" class="van-cell van-field"><div class="van-cell__value van-cell__value--alone"><div class="van-field__body">    <input type="text" placeholder="请输入银行名称" name="way" id="way" class="van-field__control"></div></div></div>  <div data-v-8ecad41e="" class="van-cell van-field"><div class="van-cell__value van-cell__value--alone">    <div class="van-field__body"><input type="text" placeholder="请输入开户网点" name="wangdian" class="van-field__control"> <input type="text" name="account" class="name-input" value="{$ulist.account}" style="display:none;"> </div></div></div></div><div data-v-8ecad41e="" class="MT10 ML10">          提现金额          <!----></div><div data-v-8ecad41e="" class="flexh"><div data-v-8ecad41e="" class="ML10" style="line-height: 0.45rem;">¥</div>  <div data-v-8ecad41e="" class="van-cell van-field"><div class="van-cell__value van-cell__value--alone"><div class="van-field__body">    <input type="number" name="price" placeholder="请输入金额,最低金额为 100" class="van-field__control"></div></div></div></div></div>  <div data-v-8ecad41e=""><!----><div data-v-8ecad41e="" class="confirm-withdraw van-button van-button--primary van-button--normal " id="submit"  onclick="setdraw()">     <span data-v-8ecad41e="" class="van-button__text">确认提现</span></div> </div></div></div></form>

挨着看每个 input 对照 js 没有问题,最后把问题锁定在了提交按钮这个<button data-v-8ecad41e="" class="confirm-withdraw van-button van-button--primary van-button--normal " id="submit" onclick="setdraw()">上面,没错 就是他!

总结出原因:不能把 onclick 执行提交 form 表格的 function 放到 botton 元素里面 因为 botton 会自动提交表格,botton!botton 惹的祸!把 botton 改为其他标签比如 div 就可以了!

yuli
  • 本文由 发表于 2020年1月23日13:11:32
  • 本文来自互利网收集整理,问题反馈联系邮箱:wosnnet@foxmail.com,转载请务必保留本文链接:https://wosn.net/3895.html

发表评论