ajax jquery上下文问题无法解决

问题描述：

尽管将上下文设置为“this”，但无法触发预期的方法。在createNewTable函数中的以下代码中，“this.joinTable（data.tableId）;”尽管将背景设置为此，仍然无法解雇。ajax jquery上下文问题无法解决

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

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); 
      } 
     }); 
    } 
}

在这里你引用它它是本地化的成功功能 – Rooster 2013-04-25 15:30:59

答

据jQuery的API文档

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

所以得到这个工作，就可以在AJAX调用之前）存储在一个变量来这参考或致电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); 
      } 
     } 
    }); 
},

酷，就像自我的方式 – 2013-04-26 06:19:47

答

这里的问题是在'成功'方法中，'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); 
     } 
    }); 
}

}

答

也许尝试中，.done（）语法代替：成功。我在成功方法上遇到了这些问题，但从来没有使用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上下文问题无法解决

相关推荐