jQuery 对 javascript 类方法的 AJAX 调用

Question

我是 jQuery 工作流程的新手，我想设置一个使用内部方法发出 AJAX 请求的 javascript 类。当请求成功返回时，jQuery AJAX 回调应该调用类本身拥有的方法。代码如下：

function IXClock()
{
    this.m_intervalID = 0;

    this.startClock = function ()
    {
        this.m_intervalID = setInterval(this.tictac, 500);
    }

    this.stopClock = function ()
    {
        clearInterval(this.m_intervalID);
    }

    this.setClockTime = function(p_strTime)
    {
        $('#clock').html(p_strTime);
    }

    this.tictac = function ()
    {
        $.ajax
        ({
                type: 'POST',
                url: '/rap/rapClock.php',
                complete: function (data)
                {
                    this.setClockTime(data);
                }
        });
    }

}

该类表示一个时钟，其内部方法 (tictac) 在服务器端请求“现在几点”。 服务器说出时间后，jQuery 的 AJAX 方法应该调用 IXClock 类的 setClockTime 方法。调用方法会更新 html 页面中的#clock div 项。

问题是 this.setClockTime() 方法结果未知，并且 javascript 返回“this.setClockTime 不是函数”错误。

问题是：有没有办法从 jQuery 的 AJAX 回调中调用类方法？

Answer 1

一个简单的解决方案是，将您的回调函数保留为self = this。这也将支持继承。

class Record{
  get_data(){
    self = this;
    $.ajax({
        type : "GET",
        url : "/get_url",
        dataType : "json",
        contentType: "application/json; charset=utf-8",
        data : {},
        success : function(data){
          console.log(data);
          self.load_table(data);
        },
      });
  }

  static load_table(data){
    console.log(data);
  }

Answer 2

结果处理程序中的 this 不是您所期望的。 （不是 IXClock 实例）

function IXClock()
{
    this.m_intervalID = 0;
}

IXClock.prototype = {

    startClock: function ()
    {
        this.m_intervalID = setInterval(this.tictac, 500);
    },

    stopClock: function ()
    {
        clearInterval(this.m_intervalID);
    },

    setClockTime: function(p_strTime)
    {
        $('#clock').html(p_strTime);
    },

    tictac: function ()
    {
        var that = this;
        $.ajax({
            type: 'POST',
            url: '/rap/rapClock.php',
            success: function (data) { // You want success here, not complete, IMO
                that.setClockTime(data);
            }
        });
    }

}

如果你问我，那个 ajax 调用是在做坏事。它似乎没有发送任何数据，也没有修改任何 服务器上的状态，但期待/获取/使用来自 php 的数据，但正在使用 POST 方法。 应该是

$.get('/rap/rapClock.php', function (data) {
    that.setClockTime(data);
});

Answer 3

我认为问题在于您的回调函数中的this 与引用IXClock 的this 不同。试试：

var thisClass = this ;
this.tictac = function ()
{
    $.ajax
    ({
            type: 'POST',
            url: '/rap/rapClock.php',
            complete: function (data)
            {
                thisClass.setClockTime(data);
            }
    });
}

测试用例（添加到已经加载了 jQuery 的站点）：

function uClass () {
    this.testFunction = function(input) {
        alert(input) ;
    }
    this.ajaxFunction = function() {
        var myClass = this ;
        $.ajax({
            type: 'POST',
            url: '/',
            complete: function(data) {
                alert(myClass.testFunction) ;
                myClass.testFunction(data) ;
                this.testFunction(data) ;
            }
        }) ;
    }
}

var k = new uClass() ;
k.ajaxFunction() ;

Answer 4

this 在您的 ajax 回调中没有引用 IXClock。 this 总是指向当前范围（查看this document）。你需要做这样的事情：

this.prototype.tictac = function ()
{
    var self = this;
    $.ajax
    ({
        type: 'POST',
        url: '/rap/rapClock.php',
        complete: function (data)
        {
            self.setClockTime(data);
        }
    });
}

您也可以为此目的使用 jQuery 的 .proxy()-function：

this.prototype.tictac = function ()
{
    $.ajax
    ({
        type: 'POST',
        url: '/rap/rapClock.php',
        complete: $.proxy(function (data) {
            this.setClockTime(data);
        }, this)
    });
}

Answer 5

这是因为你的回调函数离开全局上下文。

您可以选择两种方式

1. 使用.bind函数将上下文绑定到回调函数http://www.robertsosinski.com/2009/04/28/binding-scope-in-javascript/

2. jQuery 的 AJAX 支持将一些数据传输到回调函数。你可以这样写：

：

this.tictac = function () { $.ajax ({ type: 'POST', context:this, url: '/rap/rapClock.php', complete: function (data) { this.setClockTime(data); } }); }

}