为了账号安全,请及时绑定邮箱和手机立即绑定

Form在某些浏览器中自动向本页面提交并“刷新”

标签:
Html/CSS

今天在码js时遇到一个神奇的Bug

<form id="myform" method='POST' enctype='multipart/form-data' class='form-horizontal'></form>$(".btn-submit").click(function(){
  $("#myform").ajaxSubmit({      url:"{:U('Index/Order/view')}",      type:"POST",      success:function(data){
          location.href="xxx"
       }
  });
})

就是这么一个简单的form提交,在Chrome上可以完美运行,表单提交成功后跳转到其他页面。但是在FireFox、Safari浏览器上总是会再次跳转到自己页面,而查看数据库会发现表单确实已经向正确的位置提交。

经过艰难的debug,发现原因是因为form总是会向其默认的页面(自身页面)提交数据,并且提交完还会跳转,吃屎= =

解决方案:
在form上添加属性 onsubmit="return PostData()"
之后在js中添加PostData函数:

function PostData(){
  $("#myform").ajaxSubmit({    url:"{:U('Index/Order/view')}",    type:"POST",    success:function(data){    console.log("yu yue cheng gong!")    if(data.status == 1) {
        alert("预约成功");        console.log("yu yue cheng gong!")
        location.href = "{:U('Index/Order/index')}";
         }    else{
        alert("预约失败,错误代码:"+data.status);
        }
      }
  });  return false;  //关键!!!!!!!!!}

注意return false是关键所在,由于函数始终返回false,使得form永远不会向默认的提交页面(也就是自己页面)提交数据从而导致页面跳转,这样便只会运行我们的ajaxsubmit函数,达到目的。

总结:Chrome第一浏览器,其他都是辣鸡。

第一篇简书~



作者:皇家马德里主教练齐达内
链接:https://www.jianshu.com/p/6dced13f82e8


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消