jQuery: ajax调用成功后返回数据

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

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;
}
1237859 次浏览
小开

参见jquery文档示例: http://api.jquery.com/jQuery.ajax/ (约2/3页)

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

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

同一页面…低下来。

小开
最佳答案

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

你可以传入一个回调函数来处理结果:

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.
小开

注:这个答案写于2010年2月。
见底部2015年、2016年和2017年的更新

你不能从异步函数返回任何东西。您可以返回的是承诺。我在回答这些问题时解释了承诺是如何在jQuery中工作的:

如果你能解释为什么你想返回数据，你想用它以后做什么，那么我可能会给你一个更具体的答案如何做到这一点。

一般来说，不要:

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，因为它是异步的。promise是对函数的一个很好的抽象:我不能返回数据，因为我还没有它，我不想阻塞，让你等待，所以这里有一个承诺，你可以以后使用它，或者只是把它给别人，然后完成它。

看看这个< >强演示< / >强。

更新(2015)

目前(截至2015年3月)jQuery承诺不兼容承诺/ +规范，这意味着他们可能不能很好地与其他承诺/A+一致的实现合作。

但是jQuery在即将到来的版本3中承诺。x# EYZ0与承诺/A+规范兼容(感谢本杰明Gruenbaum指出这一点)。目前(截至2015年5月)jQuery的稳定版本是1。X和2.x。

我在上面(2011年3月)解释的是一种使用jQuery延迟对象来执行异步操作的方法，在同步代码中可以通过返回一个值来实现。

但是同步函数调用可以做两件事——它可以返回一个值(如果可以)或者抛出一个异常(如果不能返回值)。Promises/A+以一种与同步代码中的异常处理一样强大的方式处理了这两个用例。jQuery版本可以处理返回值的等价操作，但是复杂异常处理的等价操作有些问题。

特别是，在同步代码中异常处理的全部意义不只是放弃一个漂亮的消息，而是试图修复问题并继续执行，或者可能重新抛出相同或不同的异常以供程序的其他部分处理。在同步代码中，有一个调用堆栈。在异步调用中，你不需要这样做，而按照promises /A+规范的要求，在promise内部进行高级异常处理可以真正帮助你编写代码，以一种有意义的方式处理错误和异常，即使对于复杂的用例也是如此。

关于jQuery和其他实现之间的区别，以及如何将jQuery承诺转换为承诺/A+兼容，请参阅Q库wiki上Kris Kowal等人的来自jQuery和HTML5 Rocks上Jake Archibald的承诺用JavaScript实现。

如何回报一个真正的承诺

上面例子中的函数:

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

返回一个jqXHR对象，这是一个jQuery 延迟的对象。

为了让它返回一个真正的承诺，你可以使用这个方法来自Q维基将它更改为-:

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

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

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

这个Promise.resolve($.ajax(...))也是在promise模块文档中解释过，它应该与ES6 # EYZ2一起工作。

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

要查看在没有填充的情况下可以使用ES6 Promises的地方，请参见:我可以使用:承诺。

更多信息见:

jQuery的未来

jQuery的未来版本(从3。x -目前截至2015年5月的稳定版本为1。x和2.x)将与承诺/ +规范兼容(感谢本杰明Gruenbaum在评论中指出它)。# EYZ2 (# EYZ3)。更多信息请参见:jQuery 3.0:下一代由戴夫梅斯文和jQuery 3.0:更强的互操作性，更少的Internet Explorer由保罗克里尔。

有趣的对话

更新(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.then(alert)，因为你只是使用与回调相同的参数调用alert，但是箭头语法更通用，让你可以这样写:

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

并不是每个浏览器都支持这种语法，但在某些情况下，当你确定你的代码将在哪个浏览器上运行时——例如，当编写Chrome扩展， 火狐插件，或使用Electron, NW.js或AppJS的桌面应用程序时(详情请参阅这个答案)。

关于箭头函数的支持，请参见:

  • http://caniuse.com/#feat=arrow-functions
  • < a href = " http://kangax.github。io / compat-table / es6 / # test-arrow_functions noreferrer“rel = > http://kangax.github.io/compat-table/es6/ test-arrow_functions < / >

更新(2017)

现在有一个更新的语法，叫做async functions，它有一个新的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关键字创建的函数中使用它。更多信息，请参见:

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

有关Node中的支持，请参见:

  • < a href = " http://node。绿色/ # ES2017-features-async-functions noreferrer“rel = > http://node.green/ ES2017-features-async-functions < / >

在你没有原生支持async和await的地方，你可以使用Babel:

  • < a href = " https://babeljs。io / docs / plugins / transform-async-to-generator noreferrer“rel = > https://babeljs.io/docs/plugins/transform-async-to-generator/ < / >

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

更多信息

关于承诺的其他问题:

小开

你可以在ajax调用之外添加async选项来false 而且返回。

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

我不知道你们是否解决了这个问题，但我推荐另一种方法，它是有效的:)

    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，你可以让所有事情都等待，直到数据被检索。然后你把它赋给类的一个静态变量，一切都神奇地工作了:)


提交答案