有时候JQuery ajax在重定向后没有执行

Question

我有一个执行jQuery ajax请求的函数。在此功能之后，网页将被重定向到另一个网址，但有时网页会在执行ajax请求之前重定向。

executeAjax();
doRedirect();

Answer 1

Ajax的一个好处是无延迟执行下一个命令。

因此，您应该将重定向添加到ajax的“完成”或“始终”功能中。

    url = "https://www.google.com.vn/";

    $.ajax({
        url: url,
        type: 'GET',
    })
    .done(function($response) {
        console.log("success");
        doRedirect();
    })
    .always(function($response) {
        console.log("always");
        doRedirect();
    })
    ;
    
    function doRedirect(){
       location.href = "https://www.google.co.jp/maps/@35.6550509,139.8022144,15z?hl=ja";
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

ajax的优点（在您的情况下，问题）是它是一个异步操作。这意味着ajax请求不会在ajax函数之后阻塞代码。换句话说，在你的情况下，doRedirect();将无需等待executeAjax();完成。

克服这个问题的最佳方法是使用ajax方法的success属性。 success方法需要一个回调函数，它只在ajax方法成功完成后才会触发。

如果您的要求是重定向而不管ajax是成功还是失败，您可以使用ajax的complete属性

当AJAX请求成功时重定向

     $.ajax({
        url: url,
        type: 'GET',
        dataType:'JSON',
        success:function(data){
                doRedirect();//redirects only when the ajax request is successfully completed
               }
    });

当AJAX请求成功或失败时重定向

     $.ajax({
        url: url,
        type: 'GET',
        dataType:'JSON',
        complete:function(){ 
                doRedirect();//redirects even the ajax requests failed
               }
    });