Sending an Ajax post request within a loop

Question

Sending an Ajax post request within a loop

Using ajax post, I am sending the current "i" value in a loop to another PHP page and then retrieving the same "i" value from that page. However, before being posted, the "i" value is somehow incremented by 1. When I check the output using console.log(data);, it shows 2,..,100,1. This result is unexpected as I was expecting 1,..,100.

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

Here is the content of 2.php:

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

javascript ajax

Answer 1

Answer №1

Utilize the ajax call within a separate function and then call that function inside the loop.

Include async:false in your ajax request as well. This will ensure that the ajax requests are sent synchronously, waiting for each previous request to finish before sending the next one.

You can structure it like this:

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

        }
    })
}

Answer 2

Utilize the ajax call within a separate function and then call that function inside the loop.

Include async:false in your ajax request as well. This will ensure that the ajax requests are sent synchronously, waiting for each previous request to finish before sending the next one.

You can structure it like this:

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

        }
    })
}

Answer 3

Answer №2

Give this a try.

Learn about Closures

Understanding closure inside loops

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

    })(i);
}

Answer 4

Give this a try.

Learn about Closures

Understanding closure inside loops

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

    })(i);
}

Sending an Ajax post request within a loop

Answer №1

Answer №2

Similar questions

Utilize a foreach loop within a block of PHP code

Retrieving a file stored in MongoDB through GridFS using JavaScript in Node.js

The onCreated listener function in the jBox Modal dialog is experiencing issues and not functioning properly after the first use

Unconventional array presentation

Ajax fails to transmit information

The Stormpath-express login feature is incompatible with basic username and password authentication, experiencing issues

Uploading an Array of Files Using Ajax and PHP is Not Being Received by the .php Script

The content on my website is shown as ' instead of '

Invalid prop type: A form field received a `checked` prop without a corresponding `onChange` handler

Creating versatile styled-components with Bootstrap4 for reusability

Unable to process get requests on the Ionic application

Is there a way to transfer table row data to another table by simply clicking on the corresponding checkbox in the same row?

GTM - Table - Press a button to extract the text from a different element

Node.js is throwing an error stating that it cannot read the property 'id' of a null value

Populate landing page with information retrieved from a REST API using Angular 6 Interceptor

Display a text field when the onclick event is triggered within a for

Is there a way for me to ensure that the file's name matches the object ID in the database?

Retrieving all data entries that meet a specific criteria in a column using an SQL query

The object's value might be undefined, despite having null checks in place

Using Page.ResolveClientUrl in JavaScript or jQuery allows for easy resolution of client

Sending an Ajax post request within a loop

Answer №1

Answer №2

Similar questions

Utilize a foreach loop within a block of PHP code

Retrieving a file stored in MongoDB through GridFS using JavaScript in Node.js

The onCreated listener function in the jBox Modal dialog is experiencing issues and not functioning properly after the first use

Unconventional array presentation

Ajax fails to transmit information

The Stormpath-express login feature is incompatible with basic username and password authentication, experiencing issues

Uploading an Array of Files Using Ajax and PHP is Not Being Received by the .php Script

The content on my website is shown as &#039; instead of '

Invalid prop type: A form field received a `checked` prop without a corresponding `onChange` handler

Creating versatile styled-components with Bootstrap4 for reusability

Unable to process get requests on the Ionic application

Is there a way to transfer table row data to another table by simply clicking on the corresponding checkbox in the same row?

GTM - Table - Press a button to extract the text from a different element

Node.js is throwing an error stating that it cannot read the property 'id' of a null value

Populate landing page with information retrieved from a REST API using Angular 6 Interceptor

Display a text field when the onclick event is triggered within a for

Is there a way for me to ensure that the file's name matches the object ID in the database?

Retrieving all data entries that meet a specific criteria in a column using an SQL query

The object's value might be undefined, despite having null checks in place

Using Page.ResolveClientUrl in JavaScript or jQuery allows for easy resolution of client

The content on my website is shown as ' instead of '