Geek asks and answers

How to make multiple ajax requests in a loop return values ​​sequentially?

I need to make a series of Ajax requests in a loop. About 100 of them. And each request returns a JSONP variable. I am extracting data from JSON and adding the value to the div. The problem is that I want the div to be added with the data in the order of the function call. sequentially. Now I get a different order every time I refresh the page depending on the order in which the request is executed. Here is my code.

  $.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);
            }

        });
});

As I show the index value inside the div, I get random orders every time. 2 4 3 1 7 sometimes and 1 5 2 7 4 sometimes. I even try async: false. It does not help. I read somewhere that JSONP cannot be executed using async: false. Please help me.

+3
source
3

.

  $.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);
            }

        });
});
+4

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++;
    }
}
+4

Sort of:

// iterate over your set
$.each(myset, function(i,e){

  // placeholder div (hidden from view until it populated)
  var $placeholder = $('<div>').hide().appendTo('div.content');

  // make your ajax call
  $.getJSON('/link/to/resource','{date:here}',function(d){

    // insert the content in to the div and re-show it
    $placeholder.text(i + ': ' + d.movies[0].title).show();
  });
});
+2
source

More articles:


All Articles