Javascript 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; 
}

请参见jquery文档示例： （约占页面的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.

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

var promise = testAjax();

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

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

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

如果您能解释一下为什么要返回数据，以及以后要如何处理数据，那么我可能会给您一个更具体的答案

一般而言，不是：

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

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

您可以这样编写testAjax函数：

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.

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

var promise = testAjax();

promise.success(function (data) {
  alert(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.

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

var promise = testAjax();

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

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

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.

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

var promise = testAjax();

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

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

如果此时数据可用，则会立即调用此函数。如果不是，那么一旦数据可用，就会调用它

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

看这个

更新（2015年） 目前（截至2015年3月），jQuery承诺不兼容，这意味着他们可能无法很好地和其他人合作

但是，即将发布的3.x版中的jQuery Promissions将与Promissions/A+规范兼容（感谢您指出这一点）。目前（截至2015年5月），jQuery的稳定版本为1.x和2.x

我在上面（2011年3月）解释的是一种异步执行某些操作的方法，在同步代码中，这些操作将通过返回值来实现

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

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

有关jQuery与其他实现之间的差异，以及如何将jQuery承诺转换为承诺/A+兼容，请参见Q library wiki上的Kris Kowal等人和HTML5 Rocks上的Jake Archibald

如何回报一个真正的承诺 上面示例中的函数：

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

返回一个jqXHR对象，它是一个jQuery

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

或者，使用：

这个

Promise.resolve（$.ajax（…）

也是它应该使用的

今天使用Jake Archibald提供的ES6承诺

要查看在没有polyfill的情况下可以在何处使用ES6承诺，请参阅：

有关更多信息，请参阅：

jQuery的未来 jQuery的未来版本（从3.x开始-截至2015年5月的当前稳定版本为1.x和2.x）将与兼容（感谢您在评论中指出）。“我们已经决定的两个更改是Promise/A+对延迟实现的兼容性[…]”（）。有关更多信息，请参阅：戴夫·梅特文和保罗·克里尔

有趣的谈话

• Domenic Denicola（JSConfUS 2013）
• 迈克尔·杰克逊和多梅尼克·丹尼科拉（HTML5DevConf 2013）
• David M.Lee（2014年11月）

更新（2016年） called中有一个新语法，可以用来进一步简化上面的示例

使用jQuery API，而不是：

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

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));

并非所有浏览器都支持这种语法，但在某些情况下，当您确定代码将在哪个浏览器上运行时，例如在编写、应用程序或桌面应用程序时