关于javascript：jQuery：在ajax调用成功后返回数据


jQuery: Return data after ajax call success

本问题已经有最佳答案，请猛点这里访问。

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

1
2
3
4
5
6
7
8
function testAjax() {
    $.ajax({
      url:"getvalue.php",  
      success: function(data) {
         return data;
      }
   });
}

但是如果我这样叫的话

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

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

1
2
3
4
5
6
7
8
9
function testAjax() {
    $.ajax({
      url:"getvalue.php",  
      success: function(data) {

      }
   });
   return data;
}
相关讨论

注：此答案写于2010年2月，见底部2015年、2016年和2017年的更新。好的。

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

  • 返回Ajax调用数据的javascript函数
  • jquery jqxhr-取消链接调用，触发错误链

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

一般来说，不是：好的。

1
2
3
4
5
6
7
8
function testAjax() {
  $.ajax({
    url:"getvalue.php",  
    success: function(data) {
      return data;
    }
  });
}

您可以这样编写testajax函数：好的。

1
2
3
4
5
function testAjax() {
  return $.ajax({
      url:"getvalue.php"
  });
}

然后你就可以得到这样的承诺：好的。

1
var promise = testAjax();

您可以存储您的承诺，传递它，在函数调用中使用它作为参数，并从函数返回它，但是当您最终想要使用Ajax调用返回的数据时，必须这样做：好的。

1
2
3
promise.success(function (data) {
  alert(data);
});

(有关简化语法，请参阅下面的更新。)好的。

如果此时您的数据可用，那么将立即调用此函数。如果没有，那么一旦数据可用，就会调用它。好的。

执行所有这些操作的关键是，在调用$.Ajax之后，您的数据不会立即可用，因为它是异步的。对于函数来说，promise s是一个很好的抽象：我不能返回数据，因为我还没有它，我不想阻止并让您等待，所以这里有一个promise s，您以后可以使用它，或者将它交给其他人并完成它。好的。

看这个演示。好的。更新(2015)

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

然而，jquery在即将到来的3.x版本中的承诺将与promises/a+规范兼容(感谢Benjamin Gruenbaum指出这一点)。目前(截至2015年5月)，jquery的稳定版本为1.x和2.x。好的。

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

但是同步函数调用可以做两件事——它可以返回一个值(如果可以的话)，也可以抛出一个异常(如果不能返回一个值的话)。promises/a+以一种与同步代码中异常处理差不多强大的方式处理这两个用例。jquery版本处理返回值的等价物，但复杂异常处理的等价物有些问题。好的。

特别是，在同步代码中，异常处理的整个要点不仅仅是放弃一条好消息，而是试图解决问题并继续执行，或者可能会为程序的其他部分处理相同或不同的异常。在同步代码中，您有一个调用堆栈。在异步调用中，您不需要这样做，并且按照promises/a+规范的要求在您的promises中进行高级异常处理可以真正帮助您编写代码，以有意义的方式处理错误和异常，即使对于复杂的用例也是如此。好的。

有关jquery和其他实现之间的差异，以及如何将jquery承诺转换为Promises/A+兼容，请参阅KrisKowal等人的来自jquery的文章。在Q库的wiki上，JakeArchibald在HTML5Rocks上用javascript实现了承诺。好的。如何兑现承诺

上面例子中的函数：好的。

1
2
3
4
5
function testAjax() {
  return $.ajax({
      url:"getvalue.php"
  });
}

返回jqxhr对象，它是jquery延迟对象。好的。

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

1
2
3
4
5
function testAjax() {
  return Q($.ajax({
      url:"getvalue.php"
  }));
}

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

1
2
3
4
5
function testAjax() {
  return Promise.resolve($.ajax({
      url:"getvalue.php"
  }));
}

这个Promise.resolve($.ajax(...))也是promise模块文档中解释的，它应该与es6 Promise.resolve()一起工作。好的。

现在要使用ES6承诺，您可以使用Jake Archibald的ES6承诺模块的polyfill()。好的。

要查看在哪里可以使用ES6承诺而不使用polyfill，请参见：我可以使用：承诺。好的。

有关详细信息，请参阅：好的。

  • 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+与我们的延迟实现的兼容性[…]"(jquery3.0和Web开发的未来)。有关更多信息，请参阅：jquery3.0:DaveMethvin的下一代和jquery3.0:more interoperability，less internet explorer by paul krill。好的。有趣的谈话

  • Boom，Promises/A+由Domenic Denicola(JSConfus 2013)诞生。
  • 迈克尔·杰克逊和多米尼克·德尼科拉(HTML5DEVCONF 2013)从回拨地狱中赎回
  • David M.Lee的Javascript承诺(2014年11月)

更新(2016)

ECMA-262第6版第14.2节中有一种新的语法叫做arrow函数，可以用来进一步简化上述示例。好的。

使用jquery API，而不是：好的。

1
2
3
promise.success(function (data) {
  alert(data);
});

你可以写：好的。

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

或者使用承诺/a+api：好的。

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

请记住，在以下情况下始终使用拒绝处理程序：好的。

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

或与：好的。

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

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

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

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

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

不是所有的浏览器都支持这种语法，但是在某些情况下，当你确定你的代码将运行在什么浏览器上时——例如，当你编写一个chrome扩展、一个firefox插件或一个使用electron、nw.js或appjs的桌面应用程序时(请参阅这个答案了解详细信息)。好的。

有关箭头功能的支持，请参见：好的。

  • http://canius.com/feat=arrow函数
  • http://kangax.github.io/compat-table/es6/test-arrow_函数

更新(2017)

现在有一种更新的语法称为Async函数，它使用新的await关键字，而不是此代码：好的。

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

让你写：好的。

1
2
3
4
5
6
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_函数
  • https://developer.mozilla.org/en-us/docs/web/javascript/reference/operators/await

有关浏览器中的支持，请参见：好的。

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

有关节点中的支持，请参见：好的。

  • http://node.green/es2017具有异步功能

在您没有本地支持async和await的地方，您可以使用babel：好的。

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

或者使用稍微不同的语法，基于生成器的方法，如co或bluebird coroutines：好的。

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

更多信息

有关承诺的其他一些问题，请参阅：好的。

  • 承诺呼叫与承诺解决分离
  • Q承诺延迟
  • 回报承诺结果而不是承诺
  • 从Promise结果导出模块
  • 解决承诺有什么问题？
  • 从Promise块返回函数中的值
  • 我如何在承诺中返回状态？
  • 我应该避免异步处理承诺拒绝吗？
  • javascript中的延迟/承诺概念是新概念还是传统的函数式编程？
  • 我如何将这些功能与承诺联系起来？
  • promise.all在javascript中：如何获得所有承诺的解析值？
  • 为什么要承诺？一切都没有定义
  • 函数将从javascript post/get返回空值
  • 在promisfyall创建的then链中使用cancel()。
  • 为什么可以传入一个非函数参数来promise.then()而不会导致错误？
  • 实现承诺模式
  • 承诺与履行
  • 难以用承诺搜索两个URL
  • HTTP.REQUEST即使在指定"END"事件的返回之后也不返回数据
  • Async.each在使用承诺时不迭代
  • jquery jqxhr-取消链接调用，触发错误链
  • 正确处理Promiss和服务器响应的方式
  • 在完成函数内部的所有操作之前，是否从函数调用中返回一个值？
  • 解析API端点内的setTimeout
  • 异步等待函数
  • 返回Ajax调用数据的javascript函数
  • 使用async/await尝试/捕获块
  • jquery延迟，未按顺序调用resolve/done回调
  • 从Ajax返回数据会导致奇怪的对象
  • 为什么有同步和异步模块的规范？

好啊。

相关讨论

the only to the from the Way函数返回日期的摇篮，在同步异步呼叫呼叫instead of an，but，while the浏览器会冻上茶是在等待响应。P＞＜／

在回调函数中你可以通：the result that把手P＞＜／

1
2
3
4
5
6
7
8
function testAjax(handleData) {
  $.ajax({
    url:"getvalue.php",  
    success:function(data) {
      handleData(data);
    }
  });
}

呼叫它这样：P＞＜／

1
2
3
4
5
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.
相关讨论

你可以选择Add to虚假和异步Ajax返回"the呼叫。P＞＜／

1
2
3
4
5
6
7
8
9
10
11
function testAjax() {
    var result="";
    $.ajax({
      url:"getvalue.php",
      async: false,  
      success:function(data) {
         result = data;
      }
   });
   return result;
}
相关讨论

如果你们solved idk但recommend to another EN方式做作品：EN)，和P＞＜／

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    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;                
        }
    })

我知道在这里的想法是，the main，掺假，异步模式：那么你会等待直到日期is the Mind retrieved.然后在静态变量assign it to You & Mind of the class)，神奇般的作品：P＞＜／

相关讨论

EEA和jQuery实例：api.jquery.com http：/ / / / jquery.ajax(about the 2／3页)P＞＜／

You may be looking for下列代码：P＞＜／

1
2
3
4
5
6
7
    $.ajax({
     url: 'ajax/test.html',
     success: function(data) {
     $('.result').html(data);
     alert('Load was performed.');
   }
});

...lower same page down。P＞＜／