Question

尝试编写一个简单的类来更新javascript列表。

  class ep_List {

     constructor()
     {
        this.urlForAjax ='';
        this.dataList=[];
        this.dataJson='';
        this.dataParams={};
     }

     getData(method,params,url)
     {
       this.urlForAjax = url;
       this.dataParams=params;

       if(method=='get')
        this.callGetAjax();
      else
        this.callPostAjax();
     }

     callPostAjax()
     { 
        $.post(this.urlForAjax,this.dataParams,this.setList(res));
     }

     callGetAjax()
     {
        $.get(this.urlForAjax,this.setList(res));
     }

     setList(res)
     {
        console.log(res);
        this.dataList =res;
     }

  }

  class gasFilter extends ep_List {


    displayList()
    {
        //console.log(this.dataList);
      $.each(this.dataList,function(val){
         console.log('sss');
      });
    }
  }

var gasObj = new gasFilter();

gasObj.getData('get','','mapper/?mtc=101');

我收到错误

未捕获的ReferenceError：未定义res at gasFilter.callGetAjax（app.js [sm]：140） at gasFilter.getData（app.js [sm]：140）在HTMLDocument。（app.js [sm]：140）在j（jquery-3.1.1.min.js：2）在k（jquery-3.1.1.min.js：2）

欢迎提出建议

由于

Answer 1

你需要$ .post和$ .get的成功参数作为回调函数，所以尝试将其更改为：

 callPostAjax()
 { 
    $.post(this.urlForAjax,this.dataParams, res => this.setList(res));
 }

 callGetAjax()
 {
    $.get(this.urlForAjax, res => this.setList(res));
 }

您可以跳过箭头功能，如果您在其中使用this.setList.bind(this)。诀窍是您需要在this中正确设置.setList()。您可能希望详细了解bind和arrow functions如何影响范围。

此外，您需要在第二个类中使用this.dataList，而不仅仅是dataList。

这是您的代码的可修改版本。

class ep_List {

     constructor()
     {
        this.urlForAjax ='';
        this.dataList=[];
        this.dataJson='';
        this.dataParams={};
     }

     getData(method,params,url)
     {
       this.urlForAjax = url;
       this.dataParams=params;

       if(method=='get')
        this.callGetAjax();
      else
        this.callPostAjax();
        
      // Added to I could chain a call to .displayList()
      return this;

     }
     
     getFakeData(cb)
     {
       let data = [1,2,3]
       cb(data)
     }

     callPostAjax()
     { 
        this.getFakeData(this.setList.bind(this));
     }

     callGetAjax()
     {
        this.getFakeData(this.setList.bind(this));
     }

     setList(res)
     {
        console.log(res);
        this.dataList = res;
        console.log({dataList: this.dataList})
     }

  }

  class gasFilter extends ep_List {


    displayList()
    {
      // Gotta make sure you call this.dataList
      this.dataList.forEach(function(val){
         console.log('sss');
      });
    }
  }

var gasObj = new gasFilter();

gasObj.getData('get','','mapper/?mtc=101').displayList();

Answer 2

this.setList(res)

正在使用未定义的变量res调用函数。你需要通过james建议的回调传递jquery的get，或者只是删除调用的括号

$.get(this.urlForAjax,this.setList.bind(this));

.bind以双箭头函数的方式维护此作用域。

Answer 3

您的问题是您正在执行this.setList(res)。你想要做的是发送函数作为参数。

callPostAjax()
{ 
    $.post(this.urlForAjax,this.dataParams,this.setList);
}

callGetAjax()
{
   $.get(this.urlForAjax,this.setList);
}

Answer 4

所以对于其他来这里的人来说，这就是工作代码。

  class ep_List {

     constructor()
     {
        this.urlForAjax ='';
        this.dataList=[];
        this.dataJson='';
        this.dataParams={};
     }

     getData(method,params,url)
     {
       this.urlForAjax = url;
       this.dataParams=params;

       if(method=='get')
        this.callGetAjax();
       else
        this.callPostAjax();
     }

     callPostAjax()
     { 
        $.post(this.urlForAjax,this.dataParams,this.setList.bind(this));
     }

     callGetAjax()
     {
        $.get(this.urlForAjax,this.setList.bind(this));
     }

     setList(res)
     {

        this.dataList =res;
        console.log({dataList:this.dataList});
     }



  }

  class gasFilter extends ep_List {


    displayList()
    {
        var that = this;
        setTimeout(function() {
            // Gotta make sure you call this.dataList
            that.dataList.forEach(function(val){
                console.log(val);
            });
        }, 3000);

    }
  }

var gasObj = new gasFilter();

gasObj.getData('get','','mapper/?mtc=101');
gasObj.displayList();

Javascript ECMA6基本，变量未在ajax中定义

4 个答案: