Question

我有一个JavaScript函数，它使用jQuery发出两个连续的Ajax请求。我想确保在调用第二个函数之前加载了第一个请求。有没有办法可以做到这一点？

Answer 1

在async: false选项中指定$.ajax，或在第一次通话的complete回调中进行第二次ajax通话。

Answer 2

在第一个功能的回调中，进行第二次通话。

Answer 3

为获得最佳效果，您应该在第一个函数的回调中调用第二个函数。

例如：

$.post("http://www.somewebsite.com/page.php", function(data) {
  // whatever
  function2();
});

Answer 4

$.post("script1.php", {data:"val"}, function(response) {
  $.post("script2.php", {data:response}, function(results) {
    // this second call will be initialized when the first finishes
  });
});

Answer 5

示例实现：

function callback() {$('div#second_ajax_output').load('http://www.google.com');}
$('div#first_ajax_output').load('http://www.yahoo.com',callback);

Answer 6

使用jQuery最简单的方法是这样的：

 $.ajax({
   type: "POST",
   url: "some.php",       
    success: function(msg){
       $.ajax({
         type: "POST",
         url: "some2.php",

         success: function(msg){
             alert( "End of second call" );
         }
      });
    }
 });

Answer 7

简单的方法是在第一个请求时（在完整的回调中）触发第二个请求。

如果您需要更复杂的方法，请查看AjaxQueue插件。您可以通过这种方式对请求进行排队。

Answer 8

由于jQuery请求返回主题，因此在现代浏览器中，您可以await进行每次调用。例如：

async function fetchBoth() {
  const todo1 = await $.get('https://jsonplaceholder.typicode.com/todos/1');
  const todo2 = await $.get('https://jsonplaceholder.typicode.com/todos/2');
}

fetchBoth();

async function fetchBoth() {
  console.log('start 1');
  const todo1 = await $.get('https://jsonplaceholder.typicode.com/todos/1');
  console.log('got todo1', todo1);
  console.log('start 2');
  const todo2 = await $.get('https://jsonplaceholder.typicode.com/todos/2');
  console.log('got todo2', todo2);
}

fetchBoth();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

请勿使用async: false。同步ajax请求are deprecated，不应使用；如果使用的话，用户可能会因此看到控制台警告。

请注意，await的这种用法对任何Promise都适用，而不是ajax请求，而不仅仅是jQuery。例如：

async function fetchBoth() {
  console.log('start 1');
  const todo1 = await fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
  console.log('got todo1', todo1);
  console.log('start 2');
  const todo2 = await fetch('https://jsonplaceholder.typicode.com/todos/2').then(res => res.json());
  console.log('got todo2', todo2);
}

fetchBoth();

Answer 9

编辑：误读了问题;我的错。如果您希望同时执行两个AJAX请求，但只有在两个完成后才运行回调，这就是您的操作方式！

试试这个：

var completedCount = 0;
var callback = function()
{
    completedCount++;
    if (completedCount == 2)
    {
        // Do something.
    }
};

$.post('url-1', {}, callback);
$.post('url-2', {}, callback);

确保第一个ajax函数在第二个之前完成

9 个答案: