Question

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

似乎重定向是“打断”AJAX调用而不是让它发生，但这让我感到困惑。我认为在{/ em>进行调用之后，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操作成功时才会调用它。

Answer 2

在函数中包装hideresumefile调用。

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

$("#deleteresume").click( deleteresume );

var hideresumefile = function( target ) {
    $(target).closest('div').css('display', 'none');
    $(location).attr('href', 'http://example.dev/handler.php');
}

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

2 个答案: