Ajax调用后this.id未定义，如何在done回调高效获取.home的ID？

这是个很常见的上下文绑定问题~ 在.done()回调函数里，this的指向已经不是原来的.home表单元素了，而是AJAX请求对应的jqXHR对象，所以this.id会返回undefined。下面是几种高效的解决方案，不用重复执行$('.home').attr('id')：

方法1：提前保存元素ID到变量 #

这是兼容性最好、最常用的方式，在AJAX调用前把需要的ID存到变量里，回调里直接使用：

$(".home").submit(function(e) {
  e.preventDefault();
  e.stopPropagation();
  var sendData = {
        // 你的数据
      };
  // 提前保存当前元素的ID到变量
  const elementId = this.id;
  const url = "/home" + elementId;
  $.ajax({
      url: url,
      type: "POST",
      contentType: "application/json",
      data: JSON.stringify(sendData)
  }).done(function(result){
      // 直接使用提前保存的ID
      console.log(elementId);
  })
});

方法2：使用jQuery AJAX的context选项 #

jQuery的$.ajax方法支持通过context参数指定回调函数的this指向，直接把它设为当前表单元素即可：

$(".home").submit(function(e) {
  e.preventDefault();
  e.stopPropagation();
  var sendData = {
        // 你的数据
      };
  const url = "/home" + this.id;
  $.ajax({
      url: url,
      type: "POST",
      contentType: "application/json",
      data: JSON.stringify(sendData),
      // 指定回调里的this指向当前表单元素
      context: this
  }).done(function(result){
      // 现在this就是原来的.home元素了
      console.log(this.id);
  })
});

方法3：使用ES6箭头函数 #

箭头函数不会绑定自己的this，会继承外层作用域的this（也就是submit回调里的表单元素），代码更简洁，但需要环境支持ES6：

$(".home").submit(function(e) {
  e.preventDefault();
  e.stopPropagation();
  var sendData = {
        // 你的数据
      };
  const url = "/home" + this.id;
  $.ajax({
      url: url,
      type: "POST",
      contentType: "application/json",
      data: JSON.stringify(sendData)
  }).done((result) => {
      // 箭头函数继承外层的this，直接访问id
      console.log(this.id);
  })
});

内容的提问来源于stack exchange，提问作者Steven