如何在循环中生成多个ajax请求按顺序返回值？

Question

我必须在循环上发出一系列Ajax请求.大约100个.每个请求都返回一个JSONP变量.我从JSON中提取数据并继续将值附加到div中.问题是我希望div按函数调用的顺序附加数据.即顺序.现在每次刷新页面时都会得到不同的顺序,具体取决于请求完成的顺序.这是我的代码.

  $.each(elem, function (index, item) {

            $.ajax({
                type: 'post' ,
                url: moviesSearchUrl + '&q=' + encodeURI(item) + '&page_limit=1',
                dataType: "jsonp",
                async: false, 
                success: searchCallback
            });

            function searchCallback(data) {
                var movies = data.movies;

                var markup = index + ': '+   movies[0].title + '<img class=" bord" src="' + movies[0].posters.thumbnail + '" /><br/>';

                $("div.content").append(markup);
            }

        });
});

因为我在div中显示索引的值,每次我得到随机订单.有时为2 4 3 1 7,有时为1 5 2 7 4.我甚至尝试异步:false.这没有帮助.我在某处读到JSONP无法使用async:false.请帮帮我.

Answer 1

不要使用for循环.使用递归函数:

var i = 1;

function loadNext(){
    if (i < 5){
        $.ajax({
            type: "GET",
            url: "results/result_html.php?usn="+i+"&resultType="+resultType,
            dataType:"JSON",
            success:function(result){
                finalResult+=result;
                result=result+htmlMessage;
                $("#info").hide();
                $("#result").html(result);              
                $("#usn").attr("placeholder", "Class USN");
                loadNext();
            }
        });
        i++;
    }
}

Answer 2

您可以使用占位符。

  $.each(elem, function (index, item) {

            var $placeholder = $('<div>').appendTo("div.content");

            $.ajax({
                type: 'post' ,
                url: moviesSearchUrl + '&q=' + encodeURI(item) + '&page_limit=1',
                dataType: "jsonp",
                async: false, 
                success: searchCallback
            });

            function searchCallback(data) {
                var movies = data.movies;

                var markup = index + ': '+   movies[0].title + '<img class=" bord" src="' + movies[0].posters.thumbnail + '" /><br/>';

                $placeholder.replaceWith(markup);
            }

        });
});