Javascript ES6+Jquery：如何从 ajax 请求的成功回调函数中调用类的方法？ [复制]答案

【问题标题】：Javascript ES6+Jquery: How do I do to call a method of the class from within a success callback function of an ajax request? [duplicate]Javascript ES6+Jquery：如何从 ajax 请求的成功回调函数中调用类的方法？ [复制]
【发布时间】：2026-02-15 10:40:01
【问题描述】：

我正在使用能够在未来扩展功能的类和 jquery 方法 $.ajax 使用新标准 ES6 制作网格。一切都很好，直到我开始遇到范围问题。我想从 ajax 调用中调用类的方法。我怎么做？。我尝试使用this.method()，method()....但没有运气.....我也尝试在构造方法中绑定方法.....

this.generateGridHeader=this.generateGridHeader.bind(this);

也没有运气......

这是代码，问题出在成功回调函数中的 buildGrid() 方法中，对 generateGridHeader() 和 generateGridBody() 的调用.....它们没有被识别......我是意识到它没有找到它们，因为 this 不是正确的范围，但我不知道如何从那里引用类方法.....

类网格{

constructor(gridOptions) {
 this.grid_header='';
 this.grid_body='';
 this.grid='';   
 this.options=gridOptions;
 this.cacheDom();
 //this.bindEvents();
 this.buildGrid();
 //I need to bind them cause I'm going to use them inside a callback function
 //this.generateGridHeader=this.generateGridHeader.bind(this);
 //this.generateGridBody=this.generateGridBody.bind(this);
}

cacheDom() {
   this.$greeder = $(this.options.selector);
} 

bindEvents() {

}

buildGrid(){

 if(this.options.parameters !== undefined){
    //it's an ajax call
 $.ajax({
        method: "POST",
        url: this.options.data,
        data: $.param(this.options.parameters),
        success: function(data) {

            this.generateGridHeader();

             this.generateGridBody(data);

            // generateGrid(data, options); 
           // styleGrid(options);  //it can be default with bootstrap if the property style is undefined, if the user wants to put his own style he can use style:'custom' parameter
           // generatePager(options);
           // renderGrid(options);

        }
    });

 }else{
    //it's fixed data from an array or object
    //if typeof == Array parse array
    //if typeof == Object parse object
 }

}

  generateGridHeader(){

    var fields=this.options.fields;
    var header;

    header='<thead><tr>';

     $.each(fields, function(i, item) {
        header+='<th>'+fields[i].title+'</th>';
      });

     header+='</tr></thead>';
     alert(header);

    this.header=header;
}

generateGridBody(data){

} 

styleGrid(){

}    

renderGrid() {

}

}

/* dataType: 'array', 'json'possible values, if parameters is not defined it's array mode*/
var grid= new Grid({
    title:'The grid',
    selector:'#grid',
    data:'./api/getCustomers.php',
    parameters: {"id_customer":"32"},
    fields:{
        id_customer:{
         title:'ID customer'
        },
        first_name:{
         title:'First Name' 
        },
        last_name:{
         title:'Last Name'  
        }       
    }   
});

【问题讨论】：

我建议尝试绑定成功函数。即success: function() { ... }.bind(this)
就在$.ajax() 之前，您可以创建一个新变量var _that = this;，然后在您的success() 函数中使用_that.generateGridHeader() 和_that.generateGridBody(data)。或者您可以将context: this 添加到您的$.ajax() 属性中。
感谢两位。我最终使用了 Marcus 建议的 context: this 选项。我不知道那个选项。请将其发布为答案，以便我将其标记为解决方案....再次感谢！
我已将其添加为下面的答案。很高兴我能帮上忙。
您不必绑定从回调调用的generateGridHeader 和generateGridBody 方法，而是绑定回调本身。顺便说一句，既然你问的是 ES6，只需使用箭头函数进行回调。

标签： javascript jquery ecmascript-6

【解决方案1】：

将context: this 添加到您的$.ajax() 设置中。这个 (context) 对象将是此后所有与 Ajax 相关的回调的上下文。

$.ajax({
    method: "POST",
    url: this.options.data,
    context: this,
    ...

现在，在 success() 回调函数中，this 在调用 this.generateGridHeader(); 和 this.generateGridBody(data); 时将按预期工作，因为它包含正确的对象（上下文）。

更多详情请见jQuery.ajax()#context。

【讨论】：