CODEWITHSUNDEEP
javascriptajax
Premlatha
Premlatha

Reputation: 1976

ajax post in for loop

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'];
?>

Upvotes: 3

Views: 1999

Answers (2)

Kaustubh Khare
Kaustubh Khare

Reputation: 3510

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

Upvotes: 0

joy08
joy08

Reputation: 9662

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);

        }
    })
}

Upvotes: 1

Related Questions