javascript - 如何在第一个页面和更新页面成功时调用第二个 jQuery.ajax 实例

Question

我有一些 jQuery，它是在单击类 'changetag' 的链接时触发的。我正在使用 $.ajax() 通过 changetag.php 更新数据库。

然后我通过在开/关之间切换类来更改链接的视觉外观。代码如下:

$(function() {
$(".changetag").click(function(){
    var element = $(this);
    var I = element.attr("id");
    var info = 'switch_tag=' + I;

    $.ajax({
        type: "POST",
        url: "_js/changetag.php",
        data: info,
        success: function(){}
    });

    $("#li_"+I).toggleClass("off on");
    element.toggleClass("off on");

    return false;
});
});

完美运行。但现在我想添加第二个 PHP 调用，如果上述操作成功，它将提取数据并更新页面的另一个区域。

我想补充的是:

$.ajax({
    url: "_js/loaddata.php",
    success: function(results){
        $('#listresults').empty();
        $('#listresults').append(results);
    }
});

但只是将其添加到 success: function(){} 似乎不起作用。澄清一下，这是我正在测试的完整代码:

$(function() {
$.ajaxSetup ({cache: false});
$(".changetag").click(function(){
    var element = $(this);
    var I = element.attr("id");
    var info = 'switch_tag=' + I;

    $.ajax({
        type: "POST",
        url: "_js/changetag.php",
        data: info,
        success: function(){
            $.ajax({
                url: "_js/loaddata.php",
                success: function(results){
                    $('#listresults').empty();
                    $('#listresults').append(results);
                }
            });
        }
    });

    $("#li_"+I).toggleClass("off on");
    element.toggleClass("off on");

    return false;
});
});

PHP 脚本都被成功调用并且 toggle 类工作，但出于某种原因，提取的数据未写入 #listresults。

Answer 1

Ajax 调用(默认情况下)是异步的。这意味着这段代码:

$("#li_"+I).toggleClass("off on");
element.toggleClass("off on");

return false;

可以在它之前的 ajax 调用完成之前执行。对于刚接触 ajax 和异步代码执行的程序员来说，这是一个常见问题。完成 ajax 调用后要执行的任何内容都必须放入 回调 中，例如您的 success 处理程序:

$.ajax({
    type: "POST",
    url: "_js/changetag.php",
    data: info,
    success: function(){
        $("#li_"+I).toggleClass("off on");
        element.toggleClass("off on");
    }
});

同样，您也可以将第二个 ajax 调用放在那里:

$.ajax({
    type: "POST",
    url: "_js/changetag.php",
    data: info,
    success: function(){
        $("#li_"+I).toggleClass("off on");
        element.toggleClass("off on");

        $.ajax({
            url: "_js/loaddeals_v2.php",
            success: function(results){
                $('#listresults').empty();
                $('#listresults').append(results);
            }
        });
    }
});

使用 jQuery 1.5 的 Deferred Object , 你可以让它更光滑。

function firstAjax() {
    return $.ajax({
        type: "POST",
        url: "_js/changetag.php",
        data: info,
        success: function(){
            $("#li_"+I).toggleClass("off on");
            element.toggleClass("off on");
        }
    });
}

// you can simplify this second call and just use $.get()
function secondAjax() {
    return $.get("_js/loaddata.php", function(results){
        $('#listresults').html(results);
    });
}

// do the actual ajax calls
firstAjax().success(secondAjax);

这很好，因为它允许您取消嵌套回调 - 您可以编写异步执行的代码，但编写起来就像同步执行的代码。