如何在ajax中调用javascript对象的方法

鉴于此代码,

var submit = {
  send:function (form_id) {
    var url = $(form_id).attr("action");
    $.ajax({
      type: "POST",url: url,data: $(form_id).serialize(),dataType: 'json',success: function(result) {
        this.ret(result.message);
      },error: function(result) {
        // Some error message
      }
    });
  },ret:function (result) {
    this.result_data = result;
  },result_data:""
};

将从表单发送数据到控制器,如果将返回一个json

$result['message'] = validation_errors();
echo json_encode($result);

我试着在这段代码中调用这个javascript对象,

var res = submit.send(form_id);

其中form_id是表单id,并使用查找输出

console.log(res);

在控制台中,它显示未定义.在使用google和stackoverflow本身搜索解释后,我明白了,

this.ret(result.message);

在ajax中被调用,这是另一个对象,表明它不是它的方法的一部分.

我的问题是,如何在ajax中调用方法ret()？

有人能向我解释一下吗？

解决方法

有几种方法可以解决它.

一个是ES5兼容(这实际上是非常常见的模式)：

var submit = {
send: function (form_id) {
  var url = $(form_id).attr("action");
  var self = this; // << this is binded to self varialble
  $.ajax({
    type: "POST",success: function(result) {
      self.ret(result.message); // << replaced this to self so it has all the methods from the submit object.
    },error: function(result) {
      // Some error message
    }
  });
},ret:function (result) {
  this.result_data = result;
},result_data:""
};

另一个是使用ES2015中的箭头函数加$.ajax返回的延迟对象：

var submit = {
send: function (form_id) {
  var url = $(form_id).attr("action");
  $.ajax({
    type: "POST",dataType: 'json'
  })
  .then((result) => {
    this.ret(result.message); // << arrow function is called in context of the parent function,so no needs to change anything.
  })
  .fail(function(result) {
    // Some error message
  });
},result_data:""
};

说明：回调函数中的this的上下文将绑定到全局作用域而不是对象的作用域.所以你需要以某种方式改变它.

您实际上可以匹配并混合这两种方法.

您还可以使用bind或put success作为对象方法.正如其他答案所述.同样的事情,你想把它保持为对象的上下文.

There是一篇关于javascript的好文章.