与jQuery同时请求AJAX

Simultaneous AJAX request with jQuery

本文关键字：请求 AJAX jQuery      更新时间：2023-09-26

我有一个搜索建议脚本，它从两个Google API中提取结果，按整数值对结果排序，然后向用户显示。

然而，当前脚本似乎不会从第二个API返回结果，直到用户按下回车键或回车键。为什么会这样？

JSFiddle：http://jsfiddle.net/m8Kfx/

我的代码是：

var combined = [];
$(document).ready(function(){
    $("#search").keyup(function(){
        $("#suggest").html("");
        $.getJSON("http://suggestqueries.google.com/complete/search?q="+$("#search").val()+"&client=chrome&callback=?",function(data){
            for(var key in data[1]){
                if(data[4]["google:suggesttype"][key]=="NAVIGATION"){
                    combined.push("<li rel='"+data[4]["google:suggestrelevance"][key]+"'><a href='"+data[1][key]+"'>"+data[2][key]+"</a></li>");
                }else{
                    combined.push("<li rel='"+data[4]["google:suggestrelevance"][key]+"'>"+data[1][key]+"</li>");
                }
            }
        });
        $.getJSON("https://www.googleapis.com/freebase/v1/search?query="+$("#search").val()+"&limit=3&encode=html&callback=?",function(data){
            for(var key in data.result){
                combined.push("<li rel='"+Math.round(data.result[key].score*5)+"'> Freebase: "+data.result[key].name+"</li>");
            }
        });
        combined.sort(function(a,b){
             return +$(b).attr("rel") - +$(a).attr("rel");
        });
        $("#suggest").html(combined.slice(0, 5).join(""));
        combined = [];
    });
});

实际上，它确实返回值，但这里存在时间问题。在请求实际完成之前，您就用结果填写了您的列表。试试这样的东西：

http://jsfiddle.net/jDvVL/1/

此外，由于您将第二个请求的结果附加到数组中，因此由于您的.slice(0,5)，它们永远不会出现，所以我删除了它。

您可以执行类似的操作

var allData = []
$.getJSON("/values/1", function(data) {
    allData.push(data);
    if(data.length == 2){
      processData(allData) // where process data processes all the data
    }
});
$.getJSON("/values/2", function(data) {
    allData.push(data);
    if(data.length == 2){
        processData(allData) // where process data processes all the data
    }
});
var processData = function(data){
     var sum = data[0] + data[1]
     $('#mynode').html(sum);
}

将第二个getJSON封装在第一个中，如下所示。漂亮的代码BTW.

var combined = [];
$(document).ready(function(){
$("#search").keyup(function(){
    $("#suggest").html("");
    $.getJSON("http://suggestqueries.google.com/complete/search?q="+$("#search").val()+"&client=chrome&callback=?",function(data){
        for(var key in data[1]){
            if(data[4]["google:suggesttype"][key]=="NAVIGATION"){
                combined.push("<li rel='"+data[4]["google:suggestrelevance"][key]+"'><a href='"+data[1][key]+"'>"+data[2][key]+"</a></li>");
            }else{
                combined.push("<li rel='"+data[4]["google:suggestrelevance"][key]+"'>"+data[1][key]+"</li>");
            }
        }
                $.getJSON("https://www.googleapis.com/freebase/v1/search?query="+$("#search").val()+"&limit=3&encode=html&callback=?",function(data){
        for(var key in data.result){
            combined.push("<li rel='"+Math.round(data.result[key].score*5)+"'> Freebase: "+data.result[key].name+"</li>");
        }
    });
    });

    combined.sort(function(a,b){
         return +$(b).attr("rel") - +$(a).attr("rel");
    });
    $("#suggest").html(combined.slice(0, 5).join(""));
    combined = [];
});

})；

我注意到关于代码的两件事。

排序和追加应该在ajax函数的回调中调用，这可以通过制作另一个处理排序和显示的函数来实现。然后在成功回调中调用此函数。

其次，freemarker结果会显示出来，但它们总是被发送到列表的底部。如果你查看了200个结果，它们就在底部。

var combined = [];
$(document).ready(function(){
    $("#search").keyup(function(){
        $("#suggest").html("");
        $.getJSON("http://suggestqueries.google.com/complete/search?q="+$("#search").val()+"&client=chrome&callback=?",function(data){
            for(var key in data[1]){
                if(data[4]["google:suggesttype"][key]=="NAVIGATION"){
                    combined.push("<li rel='"+data[4]["google:suggestrelevance"][key]+"'><a href='"+data[1][key]+"'>"+data[2][key]+"</a></li>");
                }else{
                    combined.push("<li rel='"+data[4]["google:suggestrelevance"][key]+"'>"+data[1][key]+"</li>");
                }
            }
            sortAndDisplay(combined);
        });
        $.getJSON("https://www.googleapis.com/freebase/v1/search?query="+$("#search").val()+"&limit=3&encode=html&callback=?",function(data){
            for(var key in data.result){
                combined.push("<li rel='"+Math.round(data.result[key].score*5)+"'> Freebase: "+data.result[key].name+"</li>");
            }
            sortAndDisplay(combined);
        });
    });
});
function sortAndDisplay(combined){
        combined.sort(function(a,b){
             return +$(b).attr("rel") - +$(a).attr("rel");
        });
        $("#suggest").html(combined.slice(0, 200).join(""));
        combined = [];
}

工作示例http://jsfiddle.net/m8Kfx/4/

相关文章：