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

2020/09/25 19:41 · javascript ·  · 0评论

我有类似这样的内容,它是对脚本的简单调用,该脚本给了我一个值,一个字符串。

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

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

您可以传入一个处理结果的回调函数:

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年更新。

您不能从异步函数返回任何内容。您可以返回的是一个承诺我在回答这些问题时解释了Promise如何在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之后,您的数据不立即可用,因为它是异步的。Promises是一个很好的函数抽象:我无法将数据返回给您,因为我还没有数据,并且我不想阻塞并让您等待,所以这是一个保证,您将能够以后使用它,或仅将其提供给其他人并完成它。

看到这个演示

更新(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 +规范要求的Promise中的高级异常处理实际上可以帮助您编写代码,即使对于复杂的用例,也可以以有意义的方式处理错误和异常。

有关jQuery与其他实现之间的差异以及如何将jQuery Promise转换为Promises / A +兼容,请参阅Kris Kowal等人的《来自jQuery的书》。在Q库Wiki上,Promises由Jake Archibald在HTML5 Rocks上使用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的ES6 Promises可以在哪里使用,请参阅:我可以使用:Promises

有关更多信息,请参见:

jQuery的未来

jQuery的未来版本(从3.x开始-截至2015年5月的当前稳定版本为1.x和2.x)将与Promises / A +规范兼容(感谢Benjamin Gruenbaum在评论中指出了这一点)。“我们已经决定进行的两项更改是对我们的Deferred实现的Promise / A +兼容性[...]jQuery 3.0和Web开发的未来)。有关更多信息,请参见:Dave Methvin撰写的jQuery 3.0:The Next GenerationsPaul Krill 撰写的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与回调相同的参数进行调用,但是arrow语法更通用,可以让您编写如下内容:

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

并非每种浏览器都支持此语法,但是在某些情况下,您可以确定您的代码将在哪种浏览器上运行-例如,使用Electron,NW.js或Windows XP 编写Chrome扩展程序Firefox附加组件或桌面应用程序时AppJS(有关详细信息,请参见此答案)。

有关箭头功能的支持,请参见:

更新(2017)

现在有一种甚至更新的语法,称为异步函数,带有一个新的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的支持,请参见:

在您没有本地支持async并且await可以使用Babel的地方:

或使用稍微不同的语法,基于in co或Bluebird协程的基于生成器的方法

更多信息

有关诺言的其他一些问题,以获取更多详细信息:

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

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

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,然后使所有内容都等待,直到检索到数据为止。然后将其分配给该类的静态变量,然后一切都会神奇地起作用:)

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

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

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

同一页...降低。

本文地址:http://javascript.askforanswer.com/jqueryajaxdiaoyongchenggonghoufanhuishuju.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!