Question

我正在尝试通过AJAX提交一个简单的表单到submit.php页面，然后将其发送到数据库。当我提交它时，它会重定向到submit.php。我希望它在不重定向的情况下提交。提前谢谢！

JS

var request;
$("#myForm").submit(function(event){
    if (request) {
        request.abort();
    }
    var $form = $(this);
    var $inputs = $form.find("input, select, button, textarea");
    var serializedData = $form.serialize();
    $inputs.prop("disabled", true);
    request = $.ajax({
        url: "/submit.php",
        type: "post",
        data: serializedData

        //Could something like this work? 
        //complete: function() {***Stop redirect?***}



    });

    request.done(function (response, textStatus, jqXHR){
        console.log("Hooray, it worked!");
    });

    request.fail(function (jqXHR, textStatus, errorThrown){
        console.error(
            "The following error occured: "+
            textStatus, errorThrown
        );
    });

    request.always(function () {
        $inputs.prop("disabled", false);
    });

    event.preventDefault();
});

Answer 1

代码运行时文档是否准备就绪？如果没有，$("#myForm")返回一个空的jQuery对象，因此不会调用附加到它的任何处理程序。通过将jQuery对象保存到变量并将其记录到控制台来测试它。

两种解决方案：

将您的代码移至文档就绪处理程序：$(function () { /* my code dependent on DOM elements */ });
使用事件侦听器而不是绑定到元素：$(document).on('submit', '#myForm', function (event) { /* handler */ }

event.preventDefault();行没有任何问题 - 它可以保持原样，虽然我更喜欢将它置于最顶层，除非它是条件的一部分 - 并且不需要return false;。

原因我可以回答这个问题：我刚为此设置了本地测试并遇到了同样的问题：我的提交处理程序根本没有运行。但后来我意识到我的<script>标记位于#myForm元素之前，但在尝试使用#myForm找到它之前，我的代码没有等到文档中的$()。< / p>

编辑：将<script>标记放在<body>的底部，无需在您的情况下等待文档准备就绪。它还加快了页面渲染速度，但这是另一个讨论。

Answer 2

放上event.preventDefault（）;在第一个代码行之后，带有.submit侦听器的代码行

使用jQuery在AJAX请求后停止重定向

2 个答案: