JQuery AJAX: перенаправление с JSON - необъяснимое поведение?

Question

Я получаю объект json с сервера. Если объект json имеет «redirect» в качестве статуса, я вызываю функцию для перезагрузки небольшой части страницы, а затем перенаправления на значение данных jsonObject, которое содержит ссылку, на которую я могу перенаправить.

$.ajax({
    url: loadUrl,
    dataType: "text json",
    success: function( jsonObject, status ) {

        if ( jsonObject.status == "redirect" ) {

            ajaxLoad($('.list'), $('.group').data('ajax-link'));

            location.href = jsonObject.data;

            return false;
        }

        …

и это вызываемая мной функция ajaxLoad (), которая просто перезагружает определенную часть страницы.

function ajaxLoad(targetBox, loadUrl) {

    $.ajax({
        url: loadUrl,
        dataType: "html",
        timeout: 5000,
        cache: false,
        success: function( html, status ) {
            targetBox.html(html);
                    console.log("function() ajaxLoad : " + status);
        },
        error: function( request, status ) {
            console.log("function() ajaxLoad : " + status);
        }
    });
}

Странная вещь в том, что если я закомментирую строку location.href = jsonObject.data, то функция ajaxLoad () регистрирует УСПЕХ, если я покидаю строку перенаправления, функция ajaxLoad () регистрирует ОШИБКУ. Поэтому, если я оставляю строку, функция ajaxLoad не работает, если я удаляю строку, она работает.

Однако, как эта строка связана с остальной частью сценария?

Есть идеи?

Answer 1

Поскольку вы вызываете функцию ajaxLoad асинхронно, до того, как произойдет ее восстановление, местоположение будет изменено, поэтому вы не увидите ожидаемого поведения. Попробуйте установить местоположение в обработчике успеха ajaxLoad. Но я не понимаю, для чего нужен ajaxLoad, который частично обновляет страницу и немедленно меняет местоположение.

if ( jsonObject.status == "redirect" ) {

            ajaxLoad($('.list'), $('.group').data('ajax-link'), jsonObject.data);

            return false;
        }


function ajaxLoad(targetBox, loadUrl, dataUrl) {

    $.ajax({
        url: loadUrl,
        dataType: "html",
        timeout: 5000,
        cache: false,
        success: function( html, status ) {
            targetBox.html(html);
                    console.log("function() ajaxLoad : " + status);

           location.href = dataUrl;
        },
        error: function( request, status ) {
            console.log("function() ajaxLoad : " + status);
        }
    });
}

Answer 2

Проблема в том, что код выполняется не в том порядке, в котором вы думаете, что он это делает.Функция ajaxLoad не ожидает завершения запроса, прежде чем он существует, она просто отправляет запрос и сразу же возвращается.

Если вы хотите, чтобы перенаправление происходило после загрузки контента, вам необходимосделать это из обратного вызова успеха:

$.ajax({
  url: loadUrl,
  dataType: "text json",
  success: function( jsonObject, status ) {

    if ( jsonObject.status == "redirect" ) {

        ajaxLoad($('.list'), $('.group').data('ajax-link'), jsonObject.data);
        return false;
    }

...

и:

function ajaxLoad(targetBox, loadUrl, redirect) {

  $.ajax({
    url: loadUrl,
    dataType: "html",
    timeout: 5000,
    cache: false,
    success: function( html, status ) {
        targetBox.html(html);
        console.log("function() ajaxLoad : " + status);
        window.location.href = redirect;
    },
    error: function( request, status ) {
        console.log("function() ajaxLoad : " + status);
    }
  });
}

Answer 3

Для перенаправления вы хотите использовать window.location = jsonObject.data;

Я бы порекомендовал поместить перенаправление в обратный вызов, который вы предоставляете для ajaxLoad, чтобы перенаправление происходило при успешном вызове ajax ТА.Тогда это не будет гонка.

// Call ajaxLoad with the callback
ajaxLoad($('.list'), $('.group').data('ajax-link'), function(){window.location = jsonObject.data;});

// Add the callback to ajaxLoad
function ajaxLoad(targetBox, loadUrl, callback) {

    $.ajax({
        url: loadUrl,
        dataType: "html",
        timeout: 5000,
        cache: false,
        success: function( html, status ) {
            targetBox.html(html);
                    console.log("function() ajaxLoad : " + status);

            if(typeof(callback) == 'function')
            {
                // Execute the redirect here
                callback();
            }
        },
        error: function( request, status ) {
            console.log("function() ajaxLoad : " + status);
        }
    });
}