美文网首页JavaScript 进阶营让前端飞Web前端之路
Form在某些浏览器中自动向本页面提交并“刷新”

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

作者: 皇家马德里主教练齐达内 | 来源:发表于2018-04-28 01:36 被阅读148次

    今天在码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第一浏览器,其他都是辣鸡。

    第一篇简书~

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/hhswlftx.html