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

会将表单中的数据发送到控制器，如果将返回一个json

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

我尝试在此代码中调用此javascript对象，

var res = submit.send(form_id);

其中form_id是id形式，并使用

查找输出

console.log(res);

在控制台中，它显示undefined。在使用google和stackoverflow本身搜索解释后，我明白了，

this.ret(result.message);

在ajax中调用，这是另一个对象，表明它不属于它的方法。

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

有人可以向我解释一下吗？

Answer 1

你有两种选择。

1。 “bind（）”方法（推荐）

方法bind用于更改函数的上下文。来自docs：

bind（）方法创建一个新函数，当被调用时，它具有它此关键字设置为提供的值，具有给定的序列调用新函数时提供的任何参数。

此处bind会更改成功函数的上下文，并引用this，即submit。

$.ajax({
  type: "POST",
  url: url,
  data: $(form_id).serialize(),
  dataType: 'json',
  success: function(result) {
    this.ret(result.message);
  }.bind(this),                  // <== bind method
  error: function(result) {
    // Some error message
  }
});

.bind(this)也可以写为.bind(submit);

2。使用范围变量

由于您已经可以访问submit变量，为什么不直接使用submit来代替this

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

Answer 2

有几种方法可以解决它。

一个是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或将成功作为对象方法。正如其他答案所述。同样的，你想让this成为对象的上下文。

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

Answer 3

success: function(result) {
    this.ret(result.message);
}

在上面的块中，this指的是您正在操作的功能。要使用ret方法，您应该使用submit.ret。

Answer 4

在提交定义

中

self = this

然后将ret()与self：self.ret()

一起使用

Answer 5

我有一个小代码片段，模拟了这个：

var submit = {
  send:function (form_id) {
    var self = this;
    setTimeout(function()
    { 
      console.log('send', this);
      self.ret('message'); //will do
      //submit.ret('message'); //will do
        //this.ret('message'); this.ret is not a function
      //ret('message'); ret is not defined
    }, 0);    
  },

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

  result_data:""
};

在那里你可以看到你可能的选择来处理这个问题。

或者使用这个小提琴：https://jsfiddle.net/syqjwk2q/#&togetherjs=mpwEnNDeIJ

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

5 个答案:

1。 “bind（）”方法（推荐）

2。使用范围变量