ajax post in for loop

Question

I use ajax post to post current i value to other php page in loop and get the same i value from that php page. But, i value incremented by 1 before posted. This line console.log(data); output 2,..,100,1 .I don't understand why it happen so. The expected output is 1,..,100.

for (i = 1; i <= 100; i++) {
  $.ajax({
    type: 'POST',
    url: '2.php',   
    data: { 'id': i }   ,
    success: function(data) {                                                                           
    //console.log(data);
    }
  });
}

2.php

<?php 
echo $_POST['id'];
?>

Add `exit();` right after your `echo $_POST['id'];` to make sure the output is flushed — Ahmad, Mar 04 '20 at 06:58
@FrançoisHuppé even if $.ajax is async, it would at least print out the test values in order sometimes, not all the time — Ahmad, Mar 04 '20 at 06:59
Is the responses order always the same ? And is it 2,3,4,5...98,99,100,1 ? — François Huppé, Mar 04 '20 at 07:04
I tried the exact code from OP, locally (ubuntu,apache) and I could not reproduce the issue. The order of responses is slightly different each time, most of the time 1 is logged first... Can you confirm using your browser console (network tab), that the first request sent is the one with id=1, and that it is also the last one to finish ? — François Huppé, Mar 04 '20 at 07:16
@FrançoisHuppé, i checked the first request sent in network tab. It was 1. When get back the value in ajax success, it become 2. — Premlatha, Mar 04 '20 at 07:29

joy08 · Accepted Answer · 2020-03-04T07:12:23.910

1

use the ajax call inside a new function then invoke the function into the loop.

Also add async:false in you ajax request. It will send the ajax request synchronously waiting for the previous request to finish and then sending the next request.

Something like

function func() {
    for (let i = 1; i <= 100; i++) {
        makeRequest(i);
    }
}

function makeRequest(i) {
    $.ajax({
        type: 'POST',
        url: '2.php',
        data: {
            'id': i
        },
        async:false,
        success: function(data) {
            //console.log(data);

        }
    })
}

edited Mar 04 '20 at 07:12

answered Mar 04 '20 at 07:03

joy08

9,004
8
38
73

set `async:false` able to print output in correct order. – Premlatha Mar 04 '20 at 07:42

Kaustubh Khare · Answer 2 · 2020-03-04T08:50:14.057

0

Try This.

Closure

This is called closure inside loop.

for(i=1;i<=100; i++) {
  (function(index){
      $.ajax({
            type    :'POST',
            url     :'2.php',   
            data    :{'id':index}   ,
            success :function(data)
            {                                                                          
               //console.log(data);
            }
     });

    })(i);
}

edited Mar 04 '20 at 08:50

answered Mar 04 '20 at 07:03

Kaustubh Khare

3,280
2
32
48

@KaustubhKhare, I tried. It does not output any value – Premlatha Mar 04 '20 at 07:50
@Premlatha I have solved the issue. Please have a look at. – Kaustubh Khare Mar 04 '20 at 08:50
@KaustubhKhare,It output the value not in order. Set `async:false` solve order issue. But load slower. – Premlatha Mar 04 '20 at 09:08
@Premlatha Yes. Output will not be in the order. Because this is async call. – Kaustubh Khare Mar 04 '20 at 09:10
1

@Premlatha `async:false` will be synchronous call. It will wait for the next iteration until the previous response not received. This approach will solve order issue, but due to the synchronous call, it will be very slow. – Kaustubh Khare Mar 04 '20 at 09:13
@KaustubhKhare,please add `async:false` in your answer so that I could upvote the answer. – Premlatha Mar 05 '20 at 04:10
@Premlatha Actually `async:false` is not a recommended way. We can take another approach for order. – Kaustubh Khare Mar 05 '20 at 04:51
@Premlatha see this https://stackoverflow.com/questions/6517403/what-are-the-drawbacks-of-using-synchronous-ajax-call – Kaustubh Khare Mar 05 '20 at 04:55
@KaustubhKhare, thanks for link. I understand that `Synchronous call is not recommended as it blocks the page until the response is received`. And `Asynchronous call will continue to process next id if previous result not ready and will execute that previous result when it is ready.But, It do process all the id.` In my case, I am doing this to show progress on progressbar. So, I wish to do in order so that I can stop the progress bar when it stuck at some id. If Asynchronous, we do not know where it stuck. – Premlatha Mar 06 '20 at 02:25
@Premlatha It can be possible in asynchronous as well. You can store the response from each request into the array and you can check completion status, as you know how many are completed out of 100. – Kaustubh Khare Mar 06 '20 at 03:56
@KaustubhKhare, how to store response in ajax success to array and process it outside of ajax? – Premlatha Mar 12 '20 at 06:59

ajax post in for loop

2 Answers2