javascript - 如何在ajax中获取 `submit.preloader_id = "div#some-id";` in ` beforesend`方法的值？

Question

我用 JavaScript 编写了以下代码，

var submit = {
  preloader_id: "",

  send:function (form_id) {
    var url = $(form_id).attr("action");
    $.ajax({
      type: "POST",
      url: url,
      data: $(form_id).serialize(),
      dataType: 'json',
      success:(result) => {
      },
      error: function(result) {
        // Some errors
      },
      beforeSend: function() {
        console.log(this.preloader_id);
        if (this.preloader_id != "") {
          run_preloader(this.preloader_id);
        }
      },
      completes: function() {
        if (this.preloader_id != "") {
          run_preloader(this.preloader_id, 'true');
        }
      }
    });
  }
}

这样称呼

submit.preloader_id = "form-id";
submit.send('div#some-id');

问题是当我尝试在此方法内的 preloader_id 中获取分配的值时

beforeSend: function() {
  console.log(this.preloader_id); // look if there is id name to fetch
  if (this.preloader_id != "") {
    run_preloader(this.preloader_id);
  }
},

我没有定义，

如何在ajax中的beforesend方法中获取submit.preloader_id = "div#some-id";的值？

Answer 1

问题是因为 this 的范围在 $.ajax 的 beforeSend 处理程序中发生了变化。要解决此问题，请将引用存储在处理程序之外:

var submit = {
  preloader_id: "",

  send:function (form_id) {
    var _this = this; // store here
    var url = $(form_id).attr("action");

    $.ajax({
      type: "POST",
      url: url,
      data: $(form_id).serialize(),
      dataType: 'json',
      success:(result) => {},
      error: function(result) {
        // Some errors
      },
      beforeSend: function() {
        // use here...
        console.log(_this.preloader_id);
        if (_this.preloader_id != "") {
          run_preloader(_this.preloader_id);
        }
      },
      completes: function() {
        // and here...
        if (_this.preloader_id != "") {
          run_preloader(_this.preloader_id, 'true');
        }
      }
    });
  }
}