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

Question

给定这段代码，

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:""
};

将表单中的数据发送到 Controller ，如果 Controller 返回 json

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

我尝试在这段代码中调用这个 javascript 对象，

var res = submit.send(form_id);

其中form_id是表单id，使用

查找输出

console.log(res);

在控制台中，它显示undefined。在使用谷歌和 stackoverflow 本身搜索解释后，我想到了，

this.ret(result.message);

在 ajax 内部被调用，它是另一个对象，表明它不是其方法的一部分。

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

谁能给我解释一下？

Answer 1

有几种方法可以处理它。

一个是 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",
    url: url,
    data: $(form_id).serialize(),
    dataType: 'json',
    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",
    url: url,
    data: $(form_id).serialize(),
    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
  });
},

ret:function (result) {
  this.result_data = result;
},

result_data:""
};

说明:回调函数中 this 的上下文将绑定(bind)到全局范围，而不是对象的范围。所以你需要以某种方式改变它。

您实际上可以匹配和混合这两种方法。

您还可以使用 bind 或将 success 作为对象方法。正如其他答案中提到的那样。同样，您希望将 this 保留为对象的上下文。

There是一篇关于 javascript 中的 this 的好文章。