如何使jquery在函数中等待返回ajax

Question

我有一个带有多个嵌套ajax调用的jQuery函数：

function ulozitKlienta () {
  //some code
        if (!confirm("Není vyplněno datum vstupu klienta!\n\nPřesto uložit?")) return false;
  $.ajax({
    type    : "POST",
    cache    : false,
    url      : "ajax/ulozit_klienta.php",
    data    : JSON.stringify(out),
    dataType:  "json",
    success  : function (data) {
      if (data.vysledek == "chyba") {
        //some code
        return false;  // TODO ajax return
      } else {
        if (out["akce"] == "pridat") {
          if (data.vysledek == "duplikat") {
            $("#js-d-duplikat").dialog({
              modal    : true,
              buttons  : {
                "Přesto vytvořit nového"  :  function () {
                  out["opravdu"] = true;
                  $.ajax({
                    type    : "POST",
                    cache    : false,
                    url      : "ajax/ulozit_klienta.php",
                    data    : JSON.stringify(out),
                    dataType:  "json",
                    success  : function (data) {
                      if (data.vysledek == "chyba") {
                        //some code
                        return false;  // TODO ajax return
                      } else //some code
                    },
                    error    :  function (data, status, e) {
                      //some code
                      return false;  // TODO ajax return
                    }
                  });
                }
              }
            });
          } else //some code
        } else //some code
      }
    },
    error    :  function (data, status, e) {
      //some code
      return false;  // TODO ajax return
    }
  });
}

我将它放在函数中是因为我在其他地方从两个不同的点调用它：

$("#add_tab").on("click", function() {  // založí nový protokol a vytvoří mu tab
  if (!ulozitKlienta()) return false;
  //some code
});

$("#menu_local").on("click", "[name='ulozit_klienta']", function() {
  ulozitKlienta();
});

我的问题是，函数ulozitKlienta并没有等待ajax调用结束，而是返回未定义的结果。我想我使用的是Promise接口，就像这里显示的https://stackoverflow.com/a/11283748/836697，但我真的不知道怎么做。

Answer 1

如果您想要在ulozitKlienta完成所有异步代码之后执行一些代码，请尝试这样做:更改您的函数头并在ajax回调的末尾调用回调。这样，您就可以定义ajax-call结束时应该发生的事情。

function ulozitKlienta (successCallback, errorCallback) {
//some code
    if (!confirm("Není vyplněno datum vstupu klienta!\n\nPřesto uložit?")) return         false;
   $.ajax({
type    : "POST",
cache    : false,
url      : "ajax/ulozit_klienta.php",
data    : JSON.stringify(out),
dataType:  "json",
success  : function (data) {
  if (data.vysledek == "chyba") {
    //some code
    return false;  // TODO ajax return
  } else {
    if (out["akce"] == "pridat") {
      if (data.vysledek == "duplikat") {
        $("#js-d-duplikat").dialog({
          modal    : true,
          buttons  : {
            "Přesto vytvořit nového"  :  function () {
              out["opravdu"] = true;
              $.ajax({
                type    : "POST",
                cache    : false,
                url      : "ajax/ulozit_klienta.php",
                data    : JSON.stringify(out),
                dataType:  "json",
                success  : function (data) {
                  if (data.vysledek == "chyba") {
                    //some code
                    return false;  // TODO ajax return
                  } else //some code
                },
                error    :  function (data, status, e) {
                  //some code
                  return false;  // TODO ajax return
                }
              });
            }
          }
        });
      } else //some code
    } else //some code
  }
successCallback();
},
error    :  function (data, status, e) {
  errorCallback();
  //some code
  return false;  // TODO ajax return
}
});
 }

最后一个建议:试着用英语编写代码和注释，如果不是编码器本身，会更容易理解;-)

Answer 2

你的函数应该从$.ajax()中return出promise。

然后，您必须确保所有后续处理都从附加到该promise的.done回调中启动。

也不能从jQuery对话框按钮回调函数中return值。你可以做的是返回一个你自己制作的promise，当按钮被按下时，你可以.resolve它。

要清理此代码，您实际上需要三个函数，所有这些函数都应该返回一个promise

• 两个AJAX调用中的一个用于
• ，一个用于对话框

然后将这三个函数链接在一起，如下所示：

firstAjaxCall().then(function(data) {
    // test data - you can return `false` here if desired
    ...

    return showDialog().then(secondAjaxCall);
}).done(function() {
    // continue processing here
});