jQuery：ajax调用成功后返回数据[重复]

Question

这个问题在这里已经有了答案：

如何从异步调用返回响应（42 个回答）

8 年前关闭。

我有这样的东西，它是对脚本的简单调用，它给我一个值，一个字符串..

function testAjax() {
    $.ajax({
      url: "getvalue.php",  
      success: function(data) {
         return data; 
      }
   });
}

但如果我这样称呼

var output = testAjax(svar);  // output will be undefined...

那么我该如何返回值呢？ 下面的代码似乎也不起作用......

function testAjax() {
    $.ajax({
      url: "getvalue.php",  
      success: function(data) {

      }
   });
   return data; 
}

Answer 1

注意：此答案写于 2010 年 2 月。
在底部查看 2015、2016 和 2017 年的更新。

您不能从异步函数返回任何内容。 你能回报的是一个承诺。 我在回答这些问题时解释了 jQuery 中的 Promise 是如何工作的：

• 返回 AJAX 调用数据的 JavaScript 函数
• jQuery jqXHR - 取消链式调用，触发错误链

如果您能解释为什么要返回数据以及稍后您想用它做什么，那么我可能会给您一个更具体的答案如何去做。

通常，而不是：

function testAjax() {
  $.ajax({
    url: "getvalue.php",  
    success: function(data) {
      return data; 
    }
  });
}

您可以像这样编写 testAjax 函数：

function testAjax() {
  return $.ajax({
      url: "getvalue.php"
  });
}

然后你可以像这样得到你的承诺：

var promise = testAjax();

您可以存储您的承诺，您可以传递它，您可以将其用作函数调用中的参数，也可以从函数中返回它，但是当您最终想要使用由 AJAX 调用返回的数据时，您必须像这样做：

promise.success(function (data) {
  alert(data);
});

（有关简化的语法，请参阅下面的更新。）

如果此时您的数据可用，则将立即调用此函数。 如果不是，那么它将在数据可用时立即调用。

执行所有这些操作的全部意义在于，您的数据在调用 $.ajax 后不会立即可用，因为它是异步的。 Promises 是函数的一个很好的抽象，可以说：我无法返回数据，因为我还没有它，而且我不想阻塞并让你等待，所以这里是一个Promise ，你将能够稍后使用它，或者只是将它交给其他人并完成它。

看到这个演示。

更新 (2015)

目前（截至 2015 年 3 月）jQuery Promises 与Promises/A+ 规范不兼容，这意味着它们可能无法与其他Promises/A+ 一致性实现很好地合作。

然而，即将发布的 3.x 版中的 jQuery Promises将与 Promises/A+ 规范兼容（感谢Benjamin Gruenbaum指出）。 目前（截至 2015 年 5 月）jQuery 的稳定版本是 1.x 和 2.x。

我在上面（2011 年 3 月）解释的是一种使用jQuery Deferred Objects异步执行某些操作的方法，在同步代码中可以通过返回值来实现。

但是同步函数调用可以做两件事——它可以返回一个值（如果可以）或抛出异常（如果它不能返回值）。 Promises/A+ 以一种与同步代码中的异常处理一样强大的方式解决了这两个用例。 jQuery 版本处理相当于返回一个值就好了，但相当于复杂的异常处理有点问题。

特别是，同步代码中的异常处理的重点不仅仅是放弃一个好的消息，而是尝试修复问题并继续执行，或者可能为程序的其他部分重新抛出相同或不同的异常处理。 在同步代码中，您有一个调用堆栈。 在异步调用中，Promises/A+ 规范所要求的高级异常处理可以真正帮助您编写代码，即使对于复杂的用例，也能以有意义的方式处理错误和异常。

有关 jQuery 和其他实现之间的差异，以及如何将 jQuery 承诺转换为 Promises/A+ 兼容，请参阅 Kris Kowal 等人的来自 jQuery 。 在 Q library wiki 上， Promises在 HTML5 Rocks 上由 Jake Archibald 在 JavaScript 中到达。

如何返回一个真正的承诺

我上面例子中的函数：

function testAjax() {
  return $.ajax({
      url: "getvalue.php"
  });
}

返回一个 jqXHR 对象，它是一个 jQuery Deferred Object 。

要使其返回真正的承诺，您可以将其更改为 - 使用Q wiki 中的方法：

function testAjax() {
  return Q($.ajax({
      url: "getvalue.php"
  }));
}

或者，使用HTML5 Rocks 文章中的方法：

function testAjax() {
  return Promise.resolve($.ajax({
      url: "getvalue.php"
  }));
}

这个Promise.resolve($.ajax(...))也是promise模块文档中解释的内容，它应该与ES6 Promise.resolve() 。

今天要使用 ES6 Promises，您可以使用 Jake Archibald 的es6-promise 模块的 polyfill polyfill() 。

要查看不带 polyfill 的 ES6 Promises 可以在何处使用，请参阅：我可以使用：Promises 吗。

有关更多信息，请参阅：

• http://bugs.jquery.com/ticket/14510
• https://github.com/jquery/jquery/issues/1722
• https://gist.github.com/domenic/3889970
• http://promises-aplus.github.io/promises-spec/
• http://www.html5rocks.com/en/tutorials/es6/promises/

jQuery 的未来

jQuery 的未来版本（从 3.x 开始 - 截至 2015 年 5 月的当前稳定版本是 1.x 和 2.x）将与Promises/A+ 规范兼容（感谢Benjamin Gruenbaum在评论中指出）。 “我们已经决定的两个变化是我们的延迟实现的 Promise/A+ 兼容性 [...]” （ jQuery 3.0 和 Web 开发的未来）。 有关更多信息，请参阅： jQuery 3.0： Dave Methvin 的下一代和jQuery 3.0： Paul Krill 的更多互操作性，更少的 Internet Explorer 。

有趣的谈话

• Boom, Promises/A+ 诞生于 Domenic Denicola (JSConfUS 2013)
• Michael Jackson 和 Domenic Denicola从回调地狱中救赎(HTML5DevConf 2013)
• David M. Lee 的JavaScript Promises （Nodevember 2014）

更新 (2016)

ECMA-262，第 6 版，第 14.2 节中有一种称为箭头函数的新语法，可用于进一步简化上述示例。

使用 jQuery API，而不是：

promise.success(function (data) {
  alert(data);
});

你可以写：

promise.success(data => alert(data));

或使用 Promises/A+ API：

promise.then(data => alert(data));

请记住始终使用拒绝处理程序：

promise.then(data => alert(data), error => alert(error));

或与：

promise.then(data => alert(data)).catch(error => alert(error));

请参阅此答案以了解为什么您应该始终使用带有承诺的拒绝处理程序：

• 我应该避免异步处理 Promise 拒绝吗？

当然，在这个例子中，你可以只使用promise.then(alert)因为你只是使用与回调相同的参数调用alert ，但箭头语法更通用，可以编写如下内容：

promise.then(data => alert("x is " + data.x));

并非每个浏览器都支持这种语法，但在某些情况下，您可以确定代码将在哪个浏览器上运行 - 例如，在编写Chrome 扩展程序、 Firefox 插件或使用 Electron、NW.js 或AppJS（有关详细信息，请参阅此答案）。

有关箭头函数的支持，请参阅：

• http://caniuse.com/#feat=arrow-functions
• http://kangax.github.io/compat-table/es6/#test-arrow_functions

更新 (2017)

现在有一种更新的语法称为 async 函数，它带有一个新的await关键字，而不是以下代码：

functionReturningPromise()
    .then(data => console.log('Data:', data))
    .catch(error => console.log('Error:', error));

让你写：

try {
    let data = await functionReturningPromise();
    console.log('Data:', data);
} catch (error) {
    console.log('Error:', error);
}

您只能在使用async关键字创建的函数内使用它。 有关更多信息，请参阅：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

有关浏览器的支持，请参阅：

• http://caniuse.com/async-functions

有关 Node 中的支持，请参阅：

• http://node.green/#ES2017-features-async-functions

在没有原生支持async和await你可以使用 Babel：

• https://babeljs.io/docs/plugins/transform-async-to-generator/

或者使用稍微不同的语法基于生成器的方法，如co或 Bluebird 协程：

• https://www.npmjs.com/package/co
• http://bluebirdjs.com/docs/api/promise.coroutine.html

更多信息

有关 promise 的其他一些问题以获取更多详细信息：

• 承诺调用与承诺解析分开
• Q 承诺延迟
• 返回 Promise 结果而不是 Promise
• 从承诺结果导出模块
• 承诺解决有什么问题？
• 从承诺块返回函数中的值
• 我如何在承诺内返回状态？
• 我应该避免异步处理 Promise 拒绝吗？
• JavaScript 中的延迟/承诺概念是一个新概念还是函数式编程的传统部分？
• 如何将这些功能与承诺链接在一起？
• JavaScript 中的 Promise.all：如何获取所有 Promise 的解析值？
• 为什么 Promise.all 未定义
• 函数将从 javascript post/get 返回 null
• 在 promisifyAll 创建的 then 链中使用 cancel()
• 为什么可以将非函数参数传递给 Promise.then() 而不会导致错误？
• 实现承诺模式
• 承诺和业绩
• 无法使用 promise 抓取两个 URL
• 即使在“结束”事件上指定返回后，http.request 也不返回数据
• 使用承诺时 async.each 不迭代
• jQuery jqXHR - 取消链式调用，触发错误链
• 处理承诺和服务器响应的正确方法
• 在完成函数本身内的所有操作之前从函数调用返回一个值？
• 解决 API 端点内的 setTimeout
• 异步等待函数
• 返回 AJAX 调用数据的 JavaScript 函数
• 使用 async/await 尝试/捕获块
• jQuery Deferred 未按顺序调用解析/完成回调
• 从ajax返回数据导致奇怪的对象
• javascript - 为什么有同步和异步模块的规范？

Answer 2

从函数返回数据的唯一方法是进行同步调用而不是异步调用，但这会在浏览器等待响应时冻结。

您可以传入处理结果的回调函数：

function testAjax(handleData) {
  $.ajax({
    url:"getvalue.php",  
    success:function(data) {
      handleData(data); 
    }
  });
}

像这样调用它：

testAjax(function(output){
  // here you use the output
});
// Note: the call won't wait for the result,
// so it will continue with the code here while waiting.

Answer 3

您可以将 async 选项添加到 false并在 ajax 调用之外返回。

function testAjax() {
    var result="";
    $.ajax({
      url:"getvalue.php",
      async: false,  
      success:function(data) {
         result = data; 
      }
   });
   return result;
}

Answer 4

Idk 如果你们解决了它，但我推荐另一种方法来做到这一点，它有效:)

    ServiceUtil = ig.Class.extend({
        base_url : 'someurl',

        sendRequest: function(request)
        {
            var url = this.base_url + request;
            var requestVar = new XMLHttpRequest();
            dataGet = false;

            $.ajax({
                url: url,
                async: false,
                type: "get",
                success: function(data){
                    ServiceUtil.objDataReturned = data;
                }
            });
            return ServiceUtil.objDataReturned;                
        }
    })

所以这里的主要思想是，通过添加 async: false，然后你让一切都等待，直到数据被检索。 然后你将它分配给类的一个静态变量，一切都神奇地工作:)

Answer 5

请参阅 jquery 文档示例： http : //api.jquery.com/jQuery.ajax/ （大约页面的 2/3）

您可能正在寻找以下代码：

    $.ajax({
     url: 'ajax/test.html',
     success: function(data) {
     $('.result').html(data);
     alert('Load was performed.');
   }
});

同一页……往下。