如何在成功回調函數提交AJAX表單後重定向

Question

我的表單中有一個按鈕（不是提交），它觸發了AJAX調用。我希望頁面在之後重新加載並反映新的狀態（由AJAX調用修改）。 AJAX調用工作正常，除非我嘗試在success:回調函數的末尾添加重定向。當重定向在回調中工作時，頁面重定向並且AJAX調用不起作用。

看起來重定向是「中斷」AJAX調用，而不是讓它發生，但這讓我感到困惑。我認爲回調只發生在撥打電話後發生。那麼回調函數中的事情怎麼會干擾本應該發生的事情呢？

下面是一些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'); 
}