php - Why can I not run more than two consecutive jQuery ajax calls? - Stack Overflow

admin管理员组

文章数量:1334133

I have a page that is trying to run 3 consecutive separate ajax calls via jQuery. Unfortunately, every time I load the page, only two of the ajax calls will run. Also, it is not consistent which of the 3 calls will run.

Here is the jQuery code (On the order.php page):

$.ajax({
       type: "Post",
       url: "includes/get_product_info.php",
       data: "id=7",
       success: function(data) {
             console.log('First One Works!');
       }
});

$.ajax({
      type: "Post",
      url: "includes/get_product_info.php",
      data: "id=6",
      success: function(data) {
            console.log('Second One Works!');
      }
});

$.ajax({
      type: "Post",
      url: "includes/get_product_info.php",
      data: "id=1",
      success: function(data) {
            console.log('Third One Works!');
      }
});

Here is the PHP script (get_product_info.php):

include("connection.php");
$conn = dbConnect('query');

$sql = 'SELECT *  
        FROM products
        WHERE product_id = ' . $_POST['id'];

$result = $conn->query($sql) or die(mysqli_error($conn));
$rows = array();

while($row = $result->fetch_assoc()) {
  $rows[] = $row;
}

echo json_encode($rows);

When I load the order.php page various times, sometimes it says 'First One Works' and 'Second One Works', yet sometimes it says 'Third One works' and 'First One works', etc. This shows, it runs only two ajax calls every time and they are random which ones it will run.

How do I run all three ajax calls in their correct order?

I have a page that is trying to run 3 consecutive separate ajax calls via jQuery. Unfortunately, every time I load the page, only two of the ajax calls will run. Also, it is not consistent which of the 3 calls will run.

Here is the jQuery code (On the order.php page):

$.ajax({
       type: "Post",
       url: "includes/get_product_info.php",
       data: "id=7",
       success: function(data) {
             console.log('First One Works!');
       }
});

$.ajax({
      type: "Post",
      url: "includes/get_product_info.php",
      data: "id=6",
      success: function(data) {
            console.log('Second One Works!');
      }
});

$.ajax({
      type: "Post",
      url: "includes/get_product_info.php",
      data: "id=1",
      success: function(data) {
            console.log('Third One Works!');
      }
});

Here is the PHP script (get_product_info.php):

include("connection.php");
$conn = dbConnect('query');

$sql = 'SELECT *  
        FROM products
        WHERE product_id = ' . $_POST['id'];

$result = $conn->query($sql) or die(mysqli_error($conn));
$rows = array();

while($row = $result->fetch_assoc()) {
  $rows[] = $row;
}

echo json_encode($rows);

When I load the order.php page various times, sometimes it says 'First One Works' and 'Second One Works', yet sometimes it says 'Third One works' and 'First One works', etc. This shows, it runs only two ajax calls every time and they are random which ones it will run.

How do I run all three ajax calls in their correct order?

• php
• javascript
• ajax
• jquery

Share Improve this question Follow asked Apr 3, 2013 at 7:22 zeckdudezeckdude 16.2k4444 gold badges147147 silver badges194194 bronze badges 4

• 3 You cannot assure order, as it is an asynchronous process. Usually the requests should be in the order they have been send, but it depends on both client and server. If the server sends the third response before the first the client will get the third one before the first and there's nothing you can do against it in an asynchronous environment. If you need requests in a given order, either don't use AJAX or send the next request after the preceding one has succeeded. – Zeta Commented Apr 3, 2013 at 7:26
• Did you try with async:false – Quicksilver Commented Apr 3, 2013 at 7:26
• Because some browsers let you do max 2 request in same time. stackoverflow./a/15765647/739897 – Narek Commented Apr 3, 2013 at 7:26
• why are you using POST method? – VeXii Commented Apr 3, 2013 at 7:36

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Here's a different approach...

Could you not bine them into one call?

jQuery:

$.ajax({
       type: "Post",
       url: "includes/get_product_info.php",
       data: "id[]=7&id[]=6&id[]=1",
       success: function(data) {
           // just an example of what to do here
           $(data).appendTo('body');
       }
});

PHP:

include("connection.php");
$conn = dbConnect('query');

$sql = 'SELECT *  
        FROM products
        WHERE product_id IN(' . implode(',', $_POST['id']) .')';

$result = $conn->query($sql) or die(mysqli_error($conn));
$rows = array();

while($row = $result->fetch_assoc()) {
  $rows[] = $row;
}

echo json_encode($rows);

You might set async : false in ajax calls like:

$.ajax({
       type: "Post",
       url: "includes/get_product_info.php",
       data: "id=7",
       async: false,
       success: function(data) {
             console.log('First One Works!');
       }
});

It will execute everything in order, though async : false kills purpose of ajax.

EDIT

Or you can use ajax queue plugin.

From documentation:

This plugin creates a new method which ensures only one AJAX request is running at a time. It waits for the previous request(s) to finish before starting a new one using jQuery's built in queue.

https://github./gnarf37/jquery-ajaxQueue

It'd be best to wrap each call in its own function, then, you should call each consecutive AJAX call in the callback of the previous, so...

function one(){
  $.ajax({
    etc...
    success : two
  });
}
function two(){
  $.ajax({
    etc...
    success : three
  });
}
function three(){
  etc...
}

You don't need the wrapping functions one,two,three... but it just looks better and means you can reuse them.

perhaps because jQuery.ajax()

Perform an asynchronous HTTP (Ajax) request.

You can try adding async: fasle (default: true) but keep in mind that it is depreciated as documentation stats

As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/plete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().

use always() to call next ajax call something like:

$.ajax({
       type: "Post",
       url: "includes/get_product_info.php",
       data: "id=7",
       success: function(data) {
             console.log('First One Works!');
       }
}).always( function() {
$.ajax({
      type: "Post",
      url: "includes/get_product_info.php",
      data: "id=6",
      success: function(data) {
            console.log('Second One Works!');
      }
});
} ).always( function() { ... ;

You should send ordered async requests with use callback.

// default callback function
var noop = function(){}

$.ajax({
    // other parameters
    success: function(res1){
       secondRequest(function(res2){
         thirdRequest(function(res3){
            console.log("finished");
         })
      });
    }
});


function secondRequest(callback) {
    $.ajax({
           // other parameters
           success:callback || noop
    });
}


function thirdRequest(callback) {
    $.ajax({
           // other parameters
        success:callback || noop
    });
}

Const : With callback method we are writing callback functions nested so you can not send second request to server before finish first request.

Also may want to look deferred also.

本文标签： phpWhy can I not run more than two consecutive jQuery ajax callsStack Overflow