Question

我正在构建一个应用，点击搜索按钮后，需要进行两次API调用。第二次调用需要来自第一个请求的数据，所以我需要某种异步函数来延迟第二次调用。同样重要的是，我每按一次搜索按钮，我只能拨打2个api电话。这是代码：

$(document).ready(function(){
    $("#searchButton").click(function(){
        var requestData = $("#searchBox").val();
        var resultElement = $('#resultDiv');
        var url = "https://api.trello.com/";
        var member_id_list = "";

        $.ajax({
            method: "GET",
            url: url + "search?title="+requestData
        }) 
        .done(function(data){
            $.each(data.items, function(key, value){
                if(value.member_id !== undefined){
                    member_id_list += value.member_id + ";";
                }
                resultElement.append($("<ul>").text(value.title)).append(value.body).addClass("question-body");
                $("ul").addClass("question-title");
            });

            $(document).ajaxSuccess(function(){
                var member_id_list = member_id_list.slice(0, -1);
                $.ajax({
                    method: "GET",
                    url: url + "/member/"+ member_id_list
                })
                .done(function(data){ });
            });
        });
    });
});

我还没有完成第二次API调用所做的部分（因为我没有能够在没有提交太多请求的情况下成功进行第二次调用）。

Answer 1

我认为解决方案不是使用ajaxSuccess，而是在第一个ajax调用的done函数中进行第二次ajax调用。

每次ajax请求成功完成时都会调用ajaxSuccess。不管是什么ajax调用：它都会被执行。

你想要的是在第一次完成后触发第二次调用（.done（）函数），或者你也可以使用第一个ajax调用的成功函数（.success（）函数）

    $.ajax({
      method: "GET",
      url: url + "search?title="+requestData
    }) 
    .done(function(data){
        ...
    })
    .success(function(data){
        // second ajax call here!
        // or all code here if you only want to work with the data if successful
    })

编辑：仔细查看您的代码：我认为您需要做的就是走出界线

$(document).ajaxSuccess(function(){

及其结束线。但是，您应该考虑这样一个事实：如果服务器返回错误，也会执行done函数。

Answer 2

您应该尝试将synchronous async: false $.ajax的请求作为$(document).ready(function(){ $("#searchButton").click(function(){ var requestData = $("#searchBox").val(); var resultElement = $('#resultDiv'); var url = "https://api.trello.com/"; var member_id_list = ""; $.ajax({ async: false, method: "GET", url: url + "search?title=" + requestData, success: function(data) { $.each(data.items, function(key, value){ if(value.member_id !== undefined){ member_id_list += value.member_id + ";"; } resultElement.append($("<ul>").text(value.title)).append(value.body).addClass("question-body"); $("ul").addClass("question-title"); }); } }); var member_id_list = member_id_list.slice(0, -1); $.ajax({ async: false, method: "GET", url: url + "/member/"+ member_id_list, success: function(data) { // Do whatever you need after the second request } }); }); });。

以下是建议代码：

{{1}}

使用jQuery和Ajax进行异步API调用

2 个答案: