【问题标题】:wait for a jquery ajax callback from calling function等待来自调用函数的 jquery ajax 回调
【发布时间】:2012-07-19 13:01:45
【问题描述】:

我已经查看了很多此类问题的答案,现在我对最好的方法感到困惑。鉴于最新的jquery,我想要

  1. 调用 ajax 函数
  2. 进行 ajax 处理(成功或错误)// 工作正常
  3. 成功或错误时将状态返回给调用函数以供进一步处理

在调用函数(doAjax)中,如何等待回调然后完成处理成功或错误(在这种情况下,成功时清除表单,错误时保持原样)

感谢任何建议,

艺术 [编辑] 你们发现有一个错字,调用应该是 doAnAjax 而不是 doAjax

$(function () {
    doAnAjax(Url, data, function (myRtn) {
        if (myRtn == "success") {
            resetForm($('#myForm'));
            resetForm($('form[name=addChlGrp]'));
        } else {
            $('.rtnMsg').html("Opps! Ajax Error");
        }
    });
});

function doAnAjax(newUrl, data) {
    $.ajax({
        url: newUrl,
        async: true,
        dataType: 'html',
        beforeSend: function () {
            $('.rtnMsg').html("<img src=_cssStyleImg_-A-loading.gif>");
        },
        type: "GET",
        data: data,
        cache: false,
        success: function (data, textStatus, xhr) {
            $('.rtnMsg').html(data);
            myRtnA = "Success"
            return myRtnA;
        },
        error: function (xhr, textStatus, errorThrown) {
            $('.rtnMsg').html("opps: " + textStatus + " : " + errorThrown);
            myRtnA = "Error"
            return myRtnA;
        }
    });
}

【问题讨论】:

  • 最好的方法是使用回调。
  • @FelixKling 虽然我同意这一点,但在某些情况下,同步行为是首选。但正如我在回答中解释的那样,虽然 jQuery ajax 函数确实允许您执行同步调用,但它有点误导,因为它不再是真正的 ajax 调用了。
  • @Jon:可能有用例,但这并不能改变这样一个事实,即这是关于该主题的所有其他数百万个问题的重复;)这已经讨论过很多次...
  • @FelixKling 我没有异议,我去喝咖啡时我的页面没有刷新,所以当我做我的时候没有看到你的第二条评论:)。

标签: jquery ajax callback


【解决方案1】:

您必须使用回调函数。在下面试试这个:

$(function() {

   // I think doAjax should doAnAjax()
   // here you're passing callback
   // but you're not using it doAnAjax()

    doAnAjax(Url, data, function(myRtn) {
        if (myRtnV == "success") {
            resetForm($('#myForm'));
            resetForm($('form[name=addChlGrp]'));
        } else {
            $('.rtnMsg').html("Opps! Ajax Error");
        }
    });
});

// pass callback as third parameter to doAnAjax()

function doAnAjax(newUrl, data, callBack) {
    $.ajax({
        url: newUrl,
        async: true,
        dataType: 'html',
        beforeSend: function() {
            $('.rtnMsg').html("<img src=_cssStyleImg_-A-loading.gif>");
        },
        type: "GET",
        data: data,
        cache: false,
        success: function(data, textStatus, xhr) {
            $('.rtnMsg').html(data);
            myRtnA = "Success"
            return callBack( myRtnA );  // return callBack() with myRtna
        },
        error: function(xhr, textStatus, errorThrown) {
            $('.rtnMsg').html("opps: " + textStatus + " : " + errorThrown);
            myRtnA = "Error"
            return callBack ( myRtnA ); // return callBack() with myRtna
        }
    });

【讨论】:

  • 感谢您在 doAnAjax 调用中发现错字。添加回调是我缺少的一点。在浏览所有我感到困惑的帖子时,我误解了需要申报退货,我认为这是自动的。谢谢艺术
  • @artvanderlay:注意return callBack ( myRtnA ) 实际上应该是callBack ( myRtnA )。回调的返回值没有任何作用。
【解决方案2】:

查看 jquery 中的“延迟”。下面的示例使用 deferred.done 并关闭了异步,并且似乎对我有用。!

$.ajax({
    url: "http://www.whatever.com/whatever",
    async: false }).done(function( data ) {
        alert(data); //or whatever
    })

【讨论】:

    【解决方案3】:

    如前所述,使用回调。

    function process(url, params, successCallback, errorCallback) {
        $.ajax({
            success : successCallback,
            error : errorCallback,
            data : params,
            url : url,
            type : 'POST',
            dataType : 'json'
        });
    }
    
    process(
        'http://www.google.co.uk', 
        { 
            param1 : 'a' 
        }, 
        function(resp) { 
            alert('Success');
        },
        function() {
            alert('Uh oh');
        }
    );
    

    然后您可以将任何函数传递给process,它将在成功/错误时被调用。

    【讨论】:

    • 他特别想要同步行为,尽管回到他原来的调用函数。所以他实际上并不是在寻找异步行为,或者至少不是从他解释的内容中寻找。
    • 基于OP的代码,他可以将其合并到上面的代码中,而不必使用返回值。在successCallback 中,他可以同时使用$('.rtnMsg').html(data);resetForm($('#myForm'));,而不必返回successerror 并在那里调用它。
    • 我同意,也许他还没有理解真正异步调用的力量,因此我没有否决这个答案。但是,如果他确实想要同步行为,那么根据我的回答将异步标志从 true 切换为 false 就可以了。
    • @Jon:他想要的不一定是他需要的。但无论如何,特别是在他的示例中,我没有看到他调用doAnAjax 或以任何方式使用(不存在的)返回值。因此,没有理由对他如何使用doAnAjax 做出任何假设。在我看来,他实际上似乎试图实现回调但没有让它工作。
    • @Felix 也许他没有使用返回值,因为他不知道如何,因此他的问题。无论哪种方式,我仍然建议他使用异步调用,但是,他应该知道也有可能使用同步调用,以防这实际上是他想要的。
    【解决方案4】:

    答案是您不需要,但它很容易实现。 AJAX 的思想是异步的,因此是 A JAX。这意味着最初调用 ajax 的函数不会等待它完成,而是在 ajax 调用之后完成的所有工作都应该在成功或错误处理程序中。

    如果您需要同步的东西,您可以将您的标志从 async:true 更改为 async:false,但随后它就变成了真正的 SJAX 调用(甚至不确定该术语是否存在,但从技术上讲,它不再是 AJAX 调用了)。

    【讨论】:

    • 对于未来的人们:从 jQuery 1.8 开始,不推荐使用 async: false 和 jqXHR ($.Deferred);您必须改用成功/错误/完成回调选项
    猜你喜欢
    • 2017-06-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-06-22
    • 2020-08-23
    • 2019-05-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多