web-dev-qa-db-ja.com

JQuery Ajax beforeSendおよびsuccess、error＆complete

second ajax投稿のbeforeSendがfirst ajaxのcomplete関数の前に実行される複数のajax関数に問題があります。

送信前にプレースホルダーに追加しているロードクラスは、最初のajax呼び出しで機能しています。ただし、最初のajaxリクエストが完了するとすぐにクラスが削除され、2回目以降の呼び出しで再度追加されることはありません（再帰呼び出しを記憶します）。

デバッグ中に、2番目のajax呼び出しのbeforeSend関数が最初に呼び出され、最初のajax呼び出しのcomplete関数が後で呼び出されることが示されます。最初のajax呼び出しからページに挿入された戻りデータが2番目の呼び出しを開始するため、これは明らかです。

要するに、それは混乱しています。これを整理する方法はありますか？

機能コードは次のとおりです

function AjaxSendForm(url, placeholder, form, append) {
var data = $(form).serialize();
append = (append === undefined ? false : true); // whatever, it will evaluate to true or false only
$.ajax({
    type: 'POST',
    url: url,
    data: data,
    beforeSend: function() {
        // setting a timeout
        $(placeholder).addClass('loading');
    },
    success: function(data) {
        if (append) {
            $(placeholder).append(data);
        } else {
            $(placeholder).html(data);
        }
    },
    error: function(xhr) { // if error occured
        alert("Error occured.please try again");
        $(placeholder).append(xhr.statusText + xhr.responseText);
        $(placeholder).removeClass('loading');
    },
    complete: function() {
        $(placeholder).removeClass('loading');
    },
    dataType: 'html'
});
}

また、データには次のjavascript/jqueryのスニペットが含まれており、別のajaxリクエストをチェックして開始します。

<script type="text/javascript">//<!--
 $(document).ready(function() {
    $('#restart').val(-1)
    $('#ajaxSubmit').click();
});
//--></script>
javascriptjqueryajaxrecursion
27
Rehan Anis

たぶん、あなたは以下を試すことができます：

var i = 0;
function AjaxSendForm(url, placeholder, form, append) {
var data = $(form).serialize();
append = (append === undefined ? false : true); // whatever, it will evaluate to true or false only
$.ajax({
    type: 'POST',
    url: url,
    data: data,
    beforeSend: function() {
        // setting a timeout
        $(placeholder).addClass('loading');
        i++;
    },
    success: function(data) {
        if (append) {
            $(placeholder).append(data);
        } else {
            $(placeholder).html(data);
        }
    },
    error: function(xhr) { // if error occured
        alert("Error occured.please try again");
        $(placeholder).append(xhr.statusText + xhr.responseText);
        $(placeholder).removeClass('loading');
    },
    complete: function() {
        i--;
        if (i <= 0) {
            $(placeholder).removeClass('loading');
        }
    },
    dataType: 'html'
});
}

このように、beforeSendステートメントがcompleteステートメントの前に呼び出された場合、iは0より大きいため、クラスは削除されません。その後、最後の呼び出しでのみ削除できます。

私はそれをテストすることはできません、それが機能するかどうかを教えてください。

52
Serge K.

jQueryのpromise API を使用すると、実際にははるかに簡単です。

$.ajax(
            type: "GET",
            url: requestURL,
        ).then((success) =>
            console.dir(success)
        ).failure((failureResponse) =>
            console.dir(failureResponse)
        )

あるいは、bind関数を各結果コールバックに渡すことができます。パラメーターの順序は(success, failure)です。少なくとも1つのパラメーターを使用して関数を指定する限り、応答にアクセスできます。したがって、たとえば、応答テキストを確認する場合は、次のようにするだけで済みます。

$.ajax(
            type: "GET",
            url: @get("url") + "logout",
            beforeSend: (xhr) -> xhr.setRequestHeader("token", currentToken)
        ).failure((response) -> console.log "Request was unauthorized" if response.status is 401
7
user1429980