AJAX调用前变量赋值异常：异步导致传参始终为默认值

我明白你遇到的这个问题有多让人困惑——明明控制台输出的last_id是递增的，但AJAX调用就是死活传默认值0。咱们一步步排查解决：

可能的原因 & 对应的解决办法 #

1. 字符串类型ID导致Math.max计算异常

你从data-id获取的值大概率是字符串类型，虽然Math.max能处理部分字符串数字，但如果存在隐式转换异常（比如混入非数字值），会导致last_id计算错误（比如返回NaN，后端可能默认解析为0）。

解决办法：显式把ID转为整数类型：

$(".spouse_info").each(function(){
  // 确保数组里存的都是数字，避免Math.max出错
  spouse_ids.push(parseInt($(this).data("id"), 10));
});

2. 浏览器GET请求缓存干扰

浏览器会对GET请求做缓存，如果第一次请求的是/spouses/create?id=0，后续即使参数变化，浏览器可能直接返回缓存结果，看起来像是参数没更新。

解决办法：在AJAX配置里禁用缓存：

$.ajax({
  url: '/spouses/create',
  method: 'GET',
  cache: false, // 强制浏览器发送新请求，不使用缓存
  data: { id: last_id },
  success: function(result){
    spouse_wrapper.append(result);
  }
});

3. 变量作用域的潜在问题

虽然你用var声明的last_id在点击函数内部，但var的函数作用域偶尔会引发意外的变量共享问题。换用let的块级作用域会更稳妥。

解决办法：用let替代var声明变量：

let spouse_ids = [];
let last_id = 0;

4. 验证AJAX发送瞬间的变量值

为了彻底确认问题，可以在AJAX调用前打印last_id，确保发送瞬间的值是正确的：

// 在AJAX调用前添加这行，直接验证发送时的ID
console.log('AJAX准备发送，当前ID:', last_id);
$.ajax({
  // ... 其他配置
});

完整优化后的代码 #

把这些调整整合起来，最终代码如下：

jQuery $(".add-spouse").on("click", function(){
  let spouse_ids = [];
  let last_id = 0;
  const spouse_wrapper = $('#spouse_wrapper');

  if($(".spouse_info").length){
    $(".spouse_info").each(function(){
      spouse_ids.push(parseInt($(this).data("id"), 10));
    });
    // 额外处理空数组情况，避免Math.max返回-Infinity
    last_id = spouse_ids.length ? Math.max.apply(Math, spouse_ids) : 0;
  }

  console.log('AJAX准备发送，当前ID:', last_id);
  $.ajax({
    url: '/spouses/create',
    method: 'GET',
    cache: false,
    data: { id: last_id },
    success: function(result){
      spouse_wrapper.append(result);
    }
  });

  console.log('最终last_id:', last_id);
});

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