web-dev-qa-db-ja.com

Ajaxjqueryの成功範囲

_doop.php_へのこのajax呼び出しがあります。

_    function doop(){
        var old = $(this).siblings('.old').html();
        var new = $(this).siblings('.new').val();

        $.ajax({
            url: 'doop.php',
            type: 'POST',
            data: 'before=' + old + '&after=' + new,
            success: function(resp) {
                if(resp == 1) {
                    $(this).siblings('.old').html(new);
                }
            }
        });

        return false;
    }
_

私の問題は、$(this).siblings('.old').html(new);行が想定どおりに機能していないことです。

ありがとう..すべての有益なコメント/回答が投票されます。

更新：問題の半分はスコープであったようです（それを明確にするのに役立った回答に感謝します）が、残りの半分は私が同期的にajaxを使用しようとしていることです。新しい投稿を作成しました

javascriptjqueryajaxscope
24
Chris

まず第一に、newは 予約語 です。その変数の名前を変更する必要があります。

質問に答えるには、はい、成功コールバックの外部の変数にthisを保存し、成功ハンドラコード内でそれを参照する必要があります。

var that = this;
$.ajax({
    // ...
    success: function(resp) {
        if(resp == 1) {
            $(that).siblings('.old').html($new);
        }
    }
})

これは クロージャ と呼ばれます。

26
Crescent Fresh

http://api.jquery.com/jQuery.ajax/ のようにcontext設定を使用する必要があります

function doop(){
    var old = $(this).siblings('.old').html();
    var newValue = $(this).siblings('.new').val();

    $.ajax({
        url: 'doop.php',
        type: 'POST',
        context: this,
        data: 'before=' + old + '&after=' + newValue,
        success: function(resp) {
            if(resp == 1) {
                $(this).siblings('.old').html(newValue);
            }
        }
    });

    return false;
}

「これ」は成功範囲に転送され、期待どおりに機能します。

48
Guillaume Bois

thisは、実行関数が適用されたオブジェクトにバインドされます。これは、AJAX応答オブジェクト、グローバルオブジェクト（window）、またはその他（$.ajaxの実装に応じて）の場合があります。

$ .ajax呼び出しに入る前に、$（this）を変数にキャプチャし、それをパラメーターとして$ .ajax呼び出しに渡す必要がありますか？または、匿名の成功関数に渡す必要がありますか？それで問題が解決する場合は、どこで$ .ajaxに渡しますか？

this関数を定義する前に、successの値をキャプチャする方法が実際に必要です。クロージャを作成することは、これを行う方法です。別の変数を定義する必要があります（例：self）：

function doop() {
    var old = $(this).siblings('.old').html();
    var new = $(this).siblings('.new').val();

    var self = this;

    $.ajax({
        url: 'doop.php',
        type: 'POST',
        data: 'before=' + old + '&after=' + new,
        success: function(resp) {
            if(resp == 1) {
                $(self).siblings('.old').html(new);
            }
        }
    });

    return false;
}

success関数は、呼び出されたときにselfの値を保持し、期待どおりに動作するはずです。

6
harto