如何在嵌套Ajax中访问外层Ajax的data以添加新参数？

嘿，这个问题我之前也踩过坑！核心就是JavaScript的this指向特性——嵌套的内层Ajax里的this已经指向它自己的Ajax实例了，不再是外层那个。给你三种实用的解决思路，按需选就行：

方法一：用变量保存外层的Ajax实例 #

你代码里已经想到了用var firstAjax = this;来存外层实例，其实只要在success回调里正确引用这个变量就搞定了，而且因为对象是引用传递，直接修改firstAjax.data就能给外层请求加新参数：

$.ajax({
  type: "POST",
  url: "controller.php",
  data: { 'option1': 1 }, // 这里先放已有参数
  beforeSend: function (jqXHR) {
    var firstAjax = this; // 把外层Ajax实例存到变量里
    $.ajax({
      type: "post",
      url: "controller.php",
      data: { getNewOption: 1 },
      success: function (res) {
        // 直接操作外层的data对象，添加option2
        firstAjax.data.option2 = res.newValue; // 假设res返回了你需要的option2值
      }
    });
  }
});

方法二：提前把请求数据定义为独立变量 #

这种方式更直观，把外层Ajax要传的data单独拎出来定义，内层回调里直接就能访问并修改这个变量：

// 先定义外层请求的参数对象
var ajaxParams = { 'option1': 1 };

$.ajax({
  type: "POST",
  url: "controller.php",
  data: ajaxParams, // 直接用这个变量
  beforeSend: function (jqXHR) {
    $.ajax({
      type: "post",
      url: "controller.php",
      data: { getNewOption: 1 },
      success: function (res) {
        // 直接给提前定义的参数对象加新属性
        ajaxParams.option2 = res.newValue;
      }
    });
  }
});

额外提醒：注意异步请求的顺序！ #

上面两种方法有个潜在问题：内层Ajax是异步的，外层Ajax可能会在option2还没加上的时候就发送出去了。如果需要确保先拿到option2再发外层请求，建议用Promise或者async/await来控制异步顺序，比如：

// 把获取option2的逻辑封装成Promise
function fetchOption2() {
  return new Promise((resolve) => {
    $.ajax({
      type: "post",
      url: "controller.php",
      data: { getNewOption: 1 },
      success: function (res) {
        resolve(res.newValue);
      }
    });
  });
}

// 先拿到option2，再发送外层请求
fetchOption2().then(option2 => {
  $.ajax({
    type: "POST",
    url: "controller.php",
    data: {
      'option1': 1,
      'option2': option2 // 这里直接把拿到的值传进去
    }
  });
});

内容的提问来源于stack exchange，提问作者Sašo Krajnc