web-dev-qa-db-ja.com

関数の呼び出しからjquery ajaxコールバックを待つ

私はこのタイプの質問に対する多くの答えを検討しましたが、今では最良の方法に関して混乱しています。最新のjqueryを考えると、私はしたいです

  1. Ajax関数を呼び出す
  2. ajax処理を行う（成功またはエラー）//正常に動作します
  3. 成功またはエラーが発生すると、さらに処理するために呼び出し側関数にステータスを返します

呼び出し関数（doAjax）で、コールバックを待機してから成功またはエラーの処理を完了する方法（この場合、成功時にフォームをクリアし、エラー時にそのまま保持する）

助言のためのThx、

アート[編集]皆さんが見つけたようにタイプミスがありました、呼び出しはdoAjaxではなくdoAnAjaxでなければなりませんでした

$(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;
        }
    });
}
jqueryajaxcallback
17
art vanderlay

コールバック関数を使用する必要があります。以下を試してください：

$(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
        }
    });
17
thecodeparadox

前述のように、コールバックを使用します。

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に渡すことができ、成功またはエラー時に呼び出されます。

4
Gavin

答えはそうではありませんが、簡単に達成できます。 AJAXという考え方は非同期であるため、[〜＃〜] a [〜＃〜] JAXです。これは、元々ajaxを呼び出す関数がそれが完了するのを待たず、代わりにajax呼び出しが成功またはエラーハンドラー内にある必要がある後にすべての作業が完了するようにします。

同期する必要がある場合は、フラグをasync:trueからasync:falseに変更できますが、実際にはSJAX呼び出しになります（用語が存在するかどうかはわかりませんが、技術的にはAJAXもう呼び出します）。

2
Jon Taylor

Jqueryで「derferred」を確認してください。以下の例では、非同期をオフにしてdeferred.doneを使用しているので、うまくいくようです。

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