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

【问题标题】：How to call second jQuery.ajax instance on success of first and update page如何在第一个和更新页面成功时调用第二个 jQuery.ajax 实例
【发布时间】：2011-03-30 13:26:02
【问题描述】：

我有一些 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);
    }
});

但只是将其添加到成功中：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 脚本都被成功调用并且切换类工作，但由于某种原因，提取的数据没有写入#listresults。

【问题讨论】：

怎么不工作了？你有错误吗？你的结果变量是返回数据吗？
尝试链接它们 - $.ajax({}).ajax({});
@partick @elad-lachmi 实际上两个调用似乎都成功了，我认为它只是 $('#listresults').empty();和 $('#listresults').append(results);无法更新页面
结果是 html 字符串吗？我相信 append 需要接受一个 DOM 元素、html 字符串等。它不能只接受任何类型的内容。
没有理由先.empty() 然后.append()。就做$('#listresults').html(results);

标签： javascript ajax jquery

【解决方案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);

这很好，因为它可以让您取消嵌套回调 - 您可以编写异步执行的代码，但编写时就像同步执行的代码一样。

【讨论】：

我已经应用了所有建议的修复程序（此处和 cmets 中）并且一切正常。
如果你想变得花哨，请查看我的编辑 re:deferred（你需要 jQuery 1.5.1）。
@Matt Ball 非常感谢您的精彩回答。它确实有很大帮助。

【解决方案2】：

弃用通知：自 jQuery 3.0 起，jqXHR.success()、jqXHR.error() 和 jqXHR.complete() 回调已被删除。您可以改用 jqXHR.done()、jqXHR.fail() 和 jqXHR.always()。 https://api.jquery.com/jQuery.ajax/#jqXHR

【讨论】：