Question

尽管将上下文设置为“this”，但无法触发预期的方法。在createNewTable函数中的以下代码中，“this.joinTable（data.tableId）;”尽管设置了上下文，但是无法解雇。

我如何解决这个问题。请帮忙。

var homePageKeycontroller = {

    currentIndex:0,
    tables: new Array("newGame"),

    init: function(){
        this.select();
    },

    select : function(){
        $(".box").css({
            background:"#FFAB25"
        });
        $("#"+this.tables[this.currentIndex]).css({
            background:"gray"
        });
    },
    next : function(){
        this.currentIndex++;
        if(this.currentIndex > this.tables.length-1)
            this.currentIndex = 0;
        this.select();
    },
    previous : function(){
        this.currentIndex--;
        if(this.currentIndex <= 0)
            this.currentIndex = 0;
        this.select();
    },
    createNewTable : function(){
        $.ajax({
            url: "http://mywebiste.com/createAjaxTable",
            type:'post',
            dataType:'json',
            context:this,
            success:function(data){
                if(data.status == JsonStatus.OK){
                    alert("Table ID: "+data.tableId);
                    this.joinTable(data.tableId); // issue here
                }
            }
        });
    },
    handleUserChoice : function(){
        if(this.tables[this.currentIndex] ==='newGame'){
            this.createNewTable();
        }
    },
    joinTable : function(_tId){
        $.ajax({
            url:"http://mywebsite.com/JoinTable",
            type:'post',
            dataType:'json',
            data:{tableId:_tId},
            context:this,
            success:function(data){
                if(data.status == JsonStatus.OK){
                    this.showTable(); //issue here
                }
            }
        });
    },
    showTable : function(){
        $.ajax({
            url : 'http://mywebsite.com/showTable',
            success:function(data){
                DOM.mainCanvas.html(data);
            }
        });
    }
}

Answer 1

根据jQuery API文档

所有回调中的此引用是设置中传递给 $。ajax 的上下文选项中的对象;如果未指定上下文，则此是对Ajax设置本身的引用。

为了使这个工作正常，您可以在ajax调用之前在变量中存储对 this 的引用，或者直接在回调中调用homePageKeyController.joinTable（）：

createNewTable : function(){
    var self = this;
    $.ajax({
        url: "http://mywebiste.com/createAjaxTable",
        type:'post',
        dataType:'json',
        context:this,
        success:function(data){
            if(data.status == JsonStatus.OK){
                // Use self variable here since "this" belongs to callback
                // function context.
                // or call homePageKeyController.joinTable(data.tableId) instead.
                self.joinTable(data.tableId);
            }
        }
    });
},

Answer 2

这里的问题是在'success'方法中，'this'关键字引用包含'success'方法的ajax对象。

解决此问题的简单解决方法是：

var homePageKeycontroller = {

  var that = this;

  createNewTable : function(){
    $.ajax({
        url: "http://mywebiste.com/createAjaxTable",
        type:'post',
        dataType:'json',
        context:this,
        success:function(data){
            if(data.status == JsonStatus.OK){
                alert("Table ID: "+data.tableId);
                that.joinTable(data.tableId);
            }
        }
    });
},

joinTable : function(_tId){
    $.ajax({
        url:"http://mywebsite.com/JoinTable",
        type:'post',
        dataType:'json',
        data:{tableId:_tId},
        context:this,
        success:function(data){
            if(data.status == JsonStatus.OK){
                that.showTable();
            }
        }
    });
},
showTable : function(){
    $.ajax({
        url : 'http://mywebsite.com/showTable',
        success:function(data){
            DOM.mainCanvas.html(data);
        }
    });
}

}

Answer 3

也许尝试.done（）语法而不是：success。我在成功方法上遇到过这类问题，但从未使用过done（）方法。

createNewTable : function(){
        $.ajax({
            url: "http://mywebiste.com/createAjaxTable",
            type:'post',
            dataType:'json',
            context:this
        }).done(function(data){
            if(data.status == JsonStatus.OK) {
                alert("Table ID: "+data.tableId);
                this.joinTable(data.tableId); // issue here
            }
        });
    },

ajax jquery上下文问题无法解决

3 个答案: