能否多次调用含更新URL参数的AJAX？JS获页数后循环调用问题

当然可以实现你的需求！核心思路是利用AJAX的异步回调特性：先发起第一次请求拿到总页数pages，再在这个请求的成功回调里，基于拿到的pages值循环发起后续请求。不需要“重启for循环”，而是在第一次请求完成后再启动新的循环逻辑。

具体实现步骤 #

• 发起首次AJAX请求（pagination=1），同时显示loading_element
• 在首次请求的成功回调中，解析返回的pages值
• 循环调用AJAX请求，依次传入pagination=2到pagination=pages的参数
• 可选：所有请求完成后隐藏loading_element

代码示例（使用原生Fetch API） #

// 定义通用的AJAX请求函数
async function fetchData(pagination) {
  try {
    const response = await fetch(`你的目标URL?pagination=${pagination}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(`请求pagination=${pagination}失败:`, error);
    throw error;
  }
}

// 主逻辑
async function startBatchRequest() {
  // 显示loading元素
  document.getElementById('loading_element').style.display = 'block';

  try {
    // 1. 发起第一次请求，获取总页数pages
    const firstResponse = await fetchData(1);
    const totalPages = firstResponse.pages; // 假设返回的数据里包含pages字段

    // 2. 循环发起后续请求（pagination从2到totalPages）
    const requestPromises = [];
    for (let page = 2; page <= totalPages; page++) {
      requestPromises.push(fetchData(page));
    }

    // 等待所有后续请求完成
    await Promise.all(requestPromises);
    console.log('所有请求已完成');
  } catch (error) {
    console.error('批量请求出错:', error);
  } finally {
    // 隐藏loading元素
    document.getElementById('loading_element').style.display = 'none';
  }
}

// 启动整个流程
startBatchRequest();

关键补充说明 #

• 这里用async/await让异步代码更易读，你也可以用传统的.then()链式调用实现相同逻辑
• 如果需要按顺序发起请求（而非并行），可以把循环改成递归写法：

  // 顺序请求的递归实现
  async function fetchPagesSequentially(currentPage, totalPages) {
    if (currentPage > totalPages) return;
    
    await fetchData(currentPage);
    await fetchPagesSequentially(currentPage + 1, totalPages);
  }
  
  // 在首次请求成功后调用：
  // await fetchPagesSequentially(2, totalPages);
  

• 首次请求的loading_element显示逻辑已经包含在代码中，确保用户能看到加载状态

总结一下：你完全可以在拿到更新后的pages值后，发起后续的AJAX请求——不需要纠结“重启循环”，因为第一次请求是异步的，等它完成拿到pages后，再启动新的循环逻辑就可以了。

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