ajax - jQuery 在第一个 ajax 函数调用完全完成后继续另一个 ajax 函数

Question

我在 2 个不同的函数中有 2 个 ajax 调用。我想用 .click 来调用这两个函数。func1 将数据插入到数据库中，然后 func2 是检索数据所以我的问题是如何等到 func1 完全完成然后它只执行 func2。

我尝试了 .delay()，它有效，但我认为这是一个愚蠢的解决方案。

  $("#updateLocation").click(function(e){
      e.preventdefault;
        func1();
        func2();
      });
      return false;
    });

    function func1(){
      $.ajax({
        url:'',
      });
});

    function func2(){
      $.ajax({
        url:'',
      });
})；

Answer 1

三种方式：

在 func1 成功时调用 func2：

    function func1() {
       $.ajax({ ... }).done(func2);
    }

当 funky 完成时，使用DeferredAPI 调用 func2：

    e.preventDefault();
    $.when(func1).then(func2);

使 func1 同步（不推荐）：

    function func1() {
       $.ajax({url: '', async: false});
    }

Answer 2

由于 Ajax 调用是异步的，因此应用程序在 ajax 调用完成之前不会“暂停”，而是立即开始下一次调用。

JQuery 提供了一个处理程序，当调用成功时调用它，如果在调用过程中发生错误，则另一种处理程序。

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  },
  error :function(jqXHR, textStatus, errorThrown)
  {
     alert("something went wrong");
  }
});

您将希望从成功处理程序中调用您的第二个 AJAX 函数。

Answer 3

在 func1->ajax->succes 回调中移动 func2

$("#updateLocation").click(function(e) {
    e.preventdefault;
    func1();
    //func2();
});
return false;
});

function func1() {
    $.ajax({
        url: '',
        success: function() { /* other stuff */
            func2();
        }
    });
});

function func2() {
    $.ajax({
        url: '',
    });
})；

Answer 4

您可以将选项“async”设置为 false（对于第一个 ajax 调用）。

这意味着函数 2 将在函数 1 收到响应后被调用，即完成它的执行。

    function func1(){
      $.ajax({
        url:'',
        async: false
      });
});

Answer 5

func1 成功调用 fun2

function func1(){
  $.ajax({
    url:'',

    success:function(){
         func2();
    }  
  })

Answer 6

您还可以将函数作为参数传递，如下所示：

var secondFunc = function (func) {

    //Do ajax req or smt
    func("answer", "params");

};
var firstFunc = function() {

    secondFunc(
        function (answerFromFunc2, paramsFromfunc2) {

            var a = answerFromFunc2;
            var b = paramsFromfunc2;

        }
    );

    //Do smt after the function request to the server is done
    var doSmt = "another func or variable";

};
firstFunc();