如何让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 调用完成时应该发生的情况。

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

你的函数应该return来自$.ajax()的承诺。

然后，您必须确保所有后续处理都是从附加到该承诺的 .done 回调中开始的。

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

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

• 两个 AJAX 调用各调用一个
• 一个用于对话框

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

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

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