如何使用jQuery AJAX提交ID到多目标加载内容、优化速度并实现页载触发

问题原因&优化方案 #

你遇到的偶发加载延迟是两个独立并行AJAX请求的常见问题：浏览器对同域名下的并发请求数量有限制，且两个请求各自独立返回，不仅容易出现内容先后加载的闪烁，网络波动时也会放大延迟感知，另外当前代码缺少错误处理、请求防重逻辑，也会导致异常场景下的体验问题。
你需要的页面加载时自动提交ID加载内容的逻辑原有代码里已经通过load_page_details(1)实现了，只要默认ID参数正确即可正常运行。
以下是优化后的完整代码：

$(document).ready(function(){
  // 存储pending状态的请求，用于取消重复请求
  let pendingRequests = [];

  function load_page_details(id){
    // 先取消上一次未完成的请求，避免竞态
    pendingRequests.forEach(req => req.abort());
    pendingRequests = [];

    // 可选：添加加载状态提示，避免用户感知卡顿
    $('#colons, #cards').addClass('loading').html('加载中...');

    // 用$.when统一管理两个并行请求
    $.when(
      $.ajax({
        url:"modules/colons.php",
        method:"POST",
        data:{id:id},
      }),
      $.ajax({
        url:"modules/card.php",
        method:"POST",
        data:{id:id},
      })
    ).done(function(colonsRes, cardRes){
      // 两个请求都成功后再渲染内容，避免内容先后加载的闪烁
      $('#colons').removeClass('loading').html(colonsRes[0]);
      $('#cards').removeClass('loading').html(cardRes[0]);
    }).fail(function(err){
      // 统一处理请求错误
      $('#colons, #cards').removeClass('loading').html('加载失败，请稍后重试');
      console.error('请求出错：', err);
    }).always(function(){
      // 清空待处理请求列表
      pendingRequests = [];
    });
  }

  // 页面加载完成默认加载ID=1的内容
  load_page_details(1);

  // 绑定点击事件，注意选择器和你的实际DOM结构匹配：如果是li元素绑定就改选择器为li.nav_link.catchTab
  $('a.nav-link.catchTab').click(function(){
    const page_id = $(this).attr("id");
    load_page_details(page_id);
  });
});

额外注意点 #

• 你给出的示例DOM是<li class="nav_link" id="5">test</li>，但绑定事件的选择器是a[class="nav-link catchTab"]，实际使用时要保持DOM结构和选择器的匹配，避免点击事件不触发
• 如果两个接口的响应速度差异很大，你也可以保留原来各自在success里渲染的逻辑，只保留请求防重、错误处理的优化即可

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