使用带有单击功能的location.href=，阻止我的表单提交

Question

我有一个带有以下按钮的表单：

<input id="test2" class="formbutton" type="submit" value="Play again" />

按submit将触发此javascript：

$("#test2").click(function(){
        $.ajax({   
            type: "POST",
            data: $("#form").serialize(), 
            cache: false,  
            url: "insert.php"  
        });   
        return false;
    });

这一切都运行得很好。问题是，当我尝试ad location.href="mahjong.php?layout=win";时，我想要的是，当我按下这个按钮时，表单将被提交并加载url mahjong.php?layout=win

如果我使用：

$("#test2").click(function(){
location.href="mahjong.php?layout=win";
$.ajax({   
            type: "POST",
            data: $("#form").serialize(), 
            cache: false,  
            url: "insert.php"  
        });   
        return false;
    });

我转到url，但表单并不总是被提交。如何解决这个问题。我无法编辑insert.php文件，因为这个文件也被其他按钮使用(不需要重定向)

Answer 1

在表单返回后，使用success处理程序转到链接：

$("#test2").click(function () {
    $.ajax({
        type: "POST",
        data: $("#form").serialize(),
        cache: false,
        url: "insert.php",
        success: function () {
            location.href = "mahjong.php?layout=win";
        }
    });
    return false;
});

在页面上放置一些可视的通知可能是值得的，比如一个旋转器或禁用按钮，这样用户就知道发生了什么，而不会再次点击按钮。

Answer 2

将location.href放在ajax调用之后，否则可能会在发送ajax调用之前离开页面。

如果这不起作用，那么将location.href放在ajax调用的回调函数中，这样在您从服务器获得响应之后，它将加载一个新页面，这样您就可以确定数据已经发送。

Answer 3

一旦您设置了location.href，当前页面将被卸载，并且其上的所有脚本都将停止。

使用(延迟的)完成处理程序：

$("#test2").click(function () {
    $.ajax({
        type: "POST",
        data: $("#form").serialize(),
        cache: false,
        url: "insert.php",
    })
    .then(function() {
        location.href = "mahjong.php?layout=win";
    });
    return false;
});