Question

我从服务器获取了一个json对象。如果json对象具有“重定向”作为其状态，我正在调用一个函数来重新加载页面的一小部分，然后重定向到包含我可以重定向到的链接的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（）函数会记录SUCCESS，如果我离开重定向行，则ajaxLoad（）函数会记录ERROR。因此，如果我离开该行，ajaxLoad函数不起作用，如果我删除它的工作线。

但是，这行与其余的脚本有什么关系呢？

有什么想法吗？

Answer 1

要重定向，您要使用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);
        }
    });
}

Answer 2

由于您正在异步调用ajaxLoad函数，因此在其resposnse之前位置已更改，因此您将看不到预期的bejavior。尝试在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 3

问题是代码没有按照您认为的顺序执行。 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);
    }
  });
}

jquery ajax：用json重定向 - 无法解释的行为？

3 个答案: