Ajax jquery成功范围

时间:2009-10-15 03:28:23

标签: javascript jquery ajax scope

我有一个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方式。我已经创建了一个新帖子

3 个答案:

答案 0 :(得分:48)

您应该使用http://api.jquery.com/jQuery.ajax/

中的上下文设置
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;
}

“this”将转移到成功范围,并按预期行事。

答案 1 :(得分:26)

首先newa reserved word。您需要重命名该变量。

要回答您的问题,是的,您需要将this保存在成功回调之外的变量中,并在成功处理程序代码中引用它:

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

这称为closure

答案 2 :(得分:5)

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的值,并且应该按预期运行。