59

这是我想执行的一些代码。我想等待 AJAX 响应，这样我就可以从服务器返回一些东西。有什么办法可以做到这一点？

function functABC(){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        success: function(data) {
            return data;
        }
    });

    //Wait for AJAX (???)
}

var response = functABC();
4

7 回答 7

51

新的，使用 jquery 的 promise 实现：

function functABC(){

  // returns a promise that can be used later. 

  return $.ajax({
    url: 'myPage.php',
    data: {id: id}
  });
}


functABC().then( response => 
  console.log(response);
);

很好读，例如这里。

这实际上不是“同步”，但我认为它实现了 OP 的意图。

旧的，（jquery 的async选项已被弃用）：

所有 Ajax 调用都可以异步完成（使用回调函数，这将是在“成功”键之后指定的函数）或同步完成 - 有效地阻塞并等待服务器应答。要获得同步执行，您必须指定

async: false

就像这里描述的

但是请注意，在大多数情况下异步执行（通过成功回调）就可以了。

于 2012-09-27T06:22:40.833 回答
46

使用 Promise 时，它​​们可以在 Promise 链中使用。async=false 将被弃用，因此使用 Promise 是您的最佳选择。

function functABC() {
  return new Promise(function(resolve, reject) {
    $.ajax({
      url: 'myPage.php',
      data: {id: id},
      success: function(data) {
        resolve(data) // Resolve promise and go to then()
      },
      error: function(err) {
        reject(err) // Reject the promise and go to catch()
      }
    });
  });
}

functABC().then(function(data) {
  // Run this when your request was successful
  console.log(data)
}).catch(function(err) {
  // Run this when promise was rejected via reject()
  console.log(err)
})
于 2017-08-04T14:45:52.553 回答
23

简单的答案是关闭async。但这是错误的做法。正确的答案是重新思考如何编写其余代码。

而不是这样写：

function functABC(){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        success: function(data) {
            return data;
        }
    });
}

function foo () {
    var response = functABC();
    some_result = bar(response);
    // and other stuff and
    return some_result;
}

你应该这样写：

function functABC(callback){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        success: callback
    });
}

function foo (callback) {
    functABC(function(data){
        var response = data;
        some_result = bar(response);
        // and other stuff and
        callback(some_result);
    })
}

也就是说，不是返回结果，而是将需要完成的代码作为回调传入。正如我所展示的，回调可以嵌套到与函数调用一样多的级别。

快速解释为什么我说关闭异步是错误的：

关闭异步将在等待 ajax 调用时冻结浏览器。用户不能点击任何东西，不能滚动，在最坏的情况下，如果用户内存不足，有时当用户将窗口拖出屏幕并再次拖入时，他会看到空白区域，因为浏览器被冻结并且无法重绘。对于像 IE7 这样的单线程浏览器，情况更糟：所有网站都冻结了！遇到这种情况的用户可能会认为您的网站有问题。如果您真的不想异步执行，那么只需在后端进行处理并刷新整个页面。它至少不会让人觉得有问题。

于 2012-09-27T06:42:55.040 回答
0

试试这个代码。它对我有用。

 function getInvoiceID(url, invoiceId) {
    return $.ajax({
        type: 'POST',
        url: url,
        data: { invoiceId: invoiceId },
        async: false,
    });
}
function isInvoiceIdExists(url, invoiceId) {
    $.when(getInvoiceID(url, invoiceId)).done(function (data) {
        if (!data) {

        }
    });
}
于 2020-12-28T13:50:21.830 回答
0

现在我更喜欢使用 async 函数和 await 语法

async function functABC(){
    await $.ajax({
        url: 'myPage.php',
        data: {id: id},
        success: function(data) {
            return data;
        }
    });

    //Wait for AJAX
}
于 2022-01-28T07:22:39.233 回答
-2

将async:false属性与 url 和数据一起使用。这将有助于立即执行 ajax 调用，您可以从服务器获取和使用数据。

function functABC(){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        async:false
        success: function(data) {
            return data;
        }
    });
}
于 2012-09-27T06:19:52.260 回答
-3

方法一：

function functABC(){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        success: function(data) {
            return data;
        },
        complete: function(){
              // do the job here
         }
    });
}

var response = functABC();

方法二

function functABC(){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        async: false,
        success: function(data) {
            return data;
        }        
    });

   // do the job here
}
于 2012-09-27T06:19:55.390 回答