JavaScript中select切换时两个AJAX请求仅执行一个的问题排查

1. 先排查事件绑定方式 #

你的核心问题大概率是事件绑定覆盖导致的。如果用的是onchange = function()这种赋值式绑定，第二次赋值会直接覆盖第一次的函数，自然只会执行最后绑定的那个接口请求。

错误绑定方式（会覆盖）

const countrySel = document.querySelector('select[name="country"]');
// 第一个事件会被第二个覆盖
countrySel.onchange = function() {
  getStatesByCountryId(this.value);
};
countrySel.onchange = function() {
  get_shipping_price(this.value);
};

正确绑定方式（支持多个事件）

改用addEventListener绑定多个独立的事件处理函数：

const countrySel = document.querySelector('select[name="country"]');

// 绑定州/省请求事件
countrySel.addEventListener('change', function() {
  const countryId = this.value;
  // 这里写getStatesByCountryId的请求逻辑
  fetch(`/controller/getStatesByCountryId?country_id=${countryId}`)
    .then(res => res.json())
    .then(data => {
      // 渲染州/省选项到对应的select
      const stateSel = document.querySelector('select[name="state"]');
      stateSel.innerHTML = '<option value="">请选择州/省</option>';
      data.forEach(state => {
        const opt = document.createElement('option');
        opt.value = state.id;
        opt.textContent = state.name;
        stateSel.appendChild(opt);
      });
    })
    .catch(err => console.error('获取州/省失败:', err));
});

// 绑定运费请求事件
countrySel.addEventListener('change', function() {
  const countryId = this.value;
  // 这里写get_shipping_price的请求逻辑
  fetch(`/controller/get_shipping_price?country_id=${countryId}`)
    .then(res => res.json())
    .then(data => {
      // 渲染运费到指定span，确保选择器正确
      document.getElementById('shipping-price-span').textContent = `运费: ${data.price}元`;
    })
    .catch(err => console.error('获取运费失败:', err));
});

2. 检查是否有事件阻止逻辑 #

如果第一个事件处理函数里写了return false、event.stopPropagation()或者event.preventDefault()，会阻止后续事件执行。检查代码里有没有这类语句，非必要的话直接删除。

3. 合并请求的渲染问题排查 #

如果合并接口后运费渲染失败，先做这几步：

• 打开浏览器控制台的Network标签，确认合并接口返回的JSON里包含正确的运费字段（比如shipping_price）
• 检查span标签的选择器是否正确（比如ID拼写错误、元素还未加载完成）
• 合并请求示例（避免重复请求）：

countrySel.addEventListener('change', function() {
  const countryId = this.value;
  // 一次请求获取两种数据
  fetch(`/controller/getStatesAndShipping?country_id=${countryId}`)
    .then(res => res.json())
    .then(data => {
      // 渲染州/省
      const stateSel = document.querySelector('select[name="state"]');
      stateSel.innerHTML = '<option value="">请选择州/省</option>';
      data.states.forEach(state => {
        const opt = document.createElement('option');
        opt.value = state.id;
        opt.textContent = state.name;
        stateSel.appendChild(opt);
      });
      // 渲染运费，先判断元素是否存在
      const shippingSpan = document.getElementById('shipping-price-span');
      if (shippingSpan) {
        shippingSpan.textContent = `运费: ${data.shipping_price}元`;
      } else {
        console.error('未找到运费显示的span元素');
      }
    })
    .catch(err => console.error('请求失败:', err));
});

4. 最后验证 #

切换国家选项时，打开浏览器控制台的Network标签，查看两个接口是否都被发起，返回的状态码是否为200，数据是否正确。如果接口没发起，还是事件绑定的问题；如果接口返回错误，排查CodeIgniter后端的路由和接口逻辑。

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