javascript - 如何使用成功回调函数在 AJAX 表单提交后重定向

Question

我的表单(不是提交)中有一个触发 AJAX 调用的按钮。我希望页面在之后重新加载并反射(reflect)新状态(由 AJAX 调用修改)。 AJAX 调用工作正常，除非我尝试在 success: 回调函数的末尾添加重定向。当重定向在回调中工作时，页面重定向并且 AJAX 调用没有效果。

似乎重定向正在“中断”AJAX 调用并且不让它发生，但这让我感到困惑。我认为 success: 回调只发生在 调用之后。那么回调函数中的事情怎么会干扰应该已经发生的事情呢？

这是一些 HTML:

    <a href="http://example.dev/my-file-delete" id="deleteresume">Delete file</a>           

这是我的 javascript:

    var deleteresume = function(event) {
        event.preventDefault();
        $.ajax({
            type: "POST",
            url: "<?php echo $link_to_delete; ?>",
            success: hideresumefile( event.target )
        });

    }
    $("#deleteresume").click( deleteresume );
    var hideresumefile = function( target ) {
        $(target).closest('div').css('display', 'none');
        //THIS IS THE PROBLEM...
        $(location).attr('href', 'http://example.dev/handler.php');
    }

我尝试了多种重定向方式，例如:

window.location.replace("url");
window.location.href = "url";
location.reload(true);
window.location.reload(true);
location.href('url');
window.location.href('url');

当这些工作时，AJAX 调用不会。我错过了什么？

Answer 1

success: hideresumefile( event.target )

你没有传递函数，你在这里调用它。这意味着您的 hideresumefile 函数实际上将在 AJAX 调用之前运行...

success 必须是一个函数，为了保持相同的功能，你可以使用:

success: function () {
    hideresumefile( event.target );
}

因此您将函数调用包装在另一个函数中，该函数仅定义，不调用。它只会在 AJAX 操作成功时被调用。