Javascript 如何在Ajax成功函数中获取脚本级别变量？

在我的javascript文件中，我无法访问Ajax成功函数中的脚本级别变量。请参阅以下代码：

MyApplication.Test = Class.extend({


    ...
    ...

    testElement : null,

    ...
    ...

    updateElementBackground : function(url)
    {
        if(url.length > 0) {
        var response =  $.ajax(url ,{
                     contentType : "application/json",

                     headers: {"Access-Control-Request-Headers": "X-requested-with"}, 
                     type : "GET",
                     success : function(data) {
                          this.testElement.css("backgroundImage","url('"+url+data+"')"); // testElement is undefined now. here this refers to the Ajax call
                     },
                     error : function(e) {
                         errorCallback(e);
                      }
                  });
                  }
                  else
                  {
                    this.testElement.css("backgroundImage","testImage.jpg"); // testElement is accessible here
                  }
    }
});

---

如何在Ajax成功函数中获得“testElement”？

范围内的问题。尝试在这样的函数中创建一个var

MyApplication.Test = Class.extend({


...
...

testElement : null,

...
...

updateElementBackground : function(url)
{   
    var testElement = this.testElement;
    if(url.length > 0) {
    var response =  $.ajax(url ,{
                 contentType : "application/json",

                 headers: {"Access-Control-Request-Headers": "X-requested-with"}, 
                 type : "GET",
                 success : function(data) {
                      testElement.css("backgroundImage","url('"+url+data+"')"); // testElement is undefined now. here this refers to the Ajax call
                 },
                 error : function(e) {
                     errorCallback(e);
                  }
              });
              }
              else
              {
                this.testElement.css("backgroundImage","testImage.jpg"); // testElement is accessible here
              }
}
});

---

范围内的问题。尝试在这样的函数中创建一个var

MyApplication.Test = Class.extend({


...
...

testElement : null,

...
...

updateElementBackground : function(url)
{   
    var testElement = this.testElement;
    if(url.length > 0) {
    var response =  $.ajax(url ,{
                 contentType : "application/json",

                 headers: {"Access-Control-Request-Headers": "X-requested-with"}, 
                 type : "GET",
                 success : function(data) {
                      testElement.css("backgroundImage","url('"+url+data+"')"); // testElement is undefined now. here this refers to the Ajax call
                 },
                 error : function(e) {
                     errorCallback(e);
                  }
              });
              }
              else
              {
                this.testElement.css("backgroundImage","testImage.jpg"); // testElement is accessible here
              }
}
});

---

当您尝试获取

this.testElement

时，您可以访问

success

函数的

this

。并且没有

testElement

属性

尝试在

updateElementBackground

范围中预定义

此

updateElementBackground : function(url)
{
    var that = this;        
    var response =  $.ajax(url ,{
          success : function(data) {
               that.testElement.css("backgroundImage","url('"+url+data+"')"); 
          },
       });

}

---

当您尝试获取

this.testElement

时，您可以访问

success

函数的

this

。并且没有

testElement

属性

尝试在

updateElementBackground

范围中预定义

此

updateElementBackground : function(url)
{
    var that = this;        
    var response =  $.ajax(url ,{
          success : function(data) {
               that.testElement.css("backgroundImage","url('"+url+data+"')"); 
          },
       });

}

---

解决这个问题有两种主要方法，deadulya介绍的第一种方法是将值存储在父函数范围内的局部变量中

另一个选项是代理success函数，以确保它在类的上下文中运行

success: $.proxy(function(data) {
    ...
}, this),

---

解决这个问题有两种主要方法，deadulya介绍的第一种方法是将值存储在父函数范围内的局部变量中

另一个选项是代理success函数，以确保它在类的上下文中运行

success: $.proxy(function(data) {
    ...
}, this),

---

您必须为类实例设置

updateElementBackground

的上下文。在主干网中，它是这样的：

var View = Backbone.View.extend({
    testElement: $(...),

    initialize: function(parms){
        this.updateElementBackgroundCallback = _.bind(this.updateElementBackground , this);
    },

    events: {
        'click .something': 'updateElementBackgroundCallback'
    },

    updateElementBackground: function(){
        this.testElement.css(...);
    }
});

---

您必须为类实例设置

updateElementBackground

的上下文。在主干网中，它是这样的：

var View = Backbone.View.extend({
    testElement: $(...),

    initialize: function(parms){
        this.updateElementBackgroundCallback = _.bind(this.updateElementBackground , this);
    },

    events: {
        'click .something': 'updateElementBackgroundCallback'
    },

    updateElementBackground: function(){
        this.testElement.css(...);
    }
});