Javascript jQuery:在ajax调用成功后返回数据
我有类似的东西,它是一个简单的脚本调用,返回一个值,一个字符串Javascript jQuery:在ajax调用成功后返回数据,javascript,jquery,ajax,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;
}
});
}
但是如果我叫这样的话
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承诺,请参阅:
有关更多信息,请参阅:
- Domenic Denicola(JSConfUS 2013)
- 迈克尔·杰克逊和多梅尼克·丹尼科拉(HTML5DevConf 2013)
- David M.Lee(2014年11月)
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));
并非所有浏览器都支持这种语法,但在某些情况下,当您确定代码将在哪个浏览器上运行时,例如在编写、应用程序或桌面应用程序时