如何点击按钮时用JSON的next_page_url发起XMLHttpRequest请求？

核心实现思路 #

1. 把数据请求逻辑封装成可复用函数，接收请求URL作为参数
2. 每次请求成功后，从返回JSON中提取next_page_url并保存
3. 点击“Next Page”按钮时，用保存的下一页URL发起新请求，同时处理无下一页的情况（比如禁用/隐藏按钮）

完整代码示例 #

HTML

<div id="data-container"></div>
<button id="next-btn" disabled>Next Page</button>

CSS

#data-container {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #ddd;
}
#next-btn {
  padding: 8px 16px;
  cursor: pointer;
}
#next-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

JavaScript

let nextPageUrl = null;
const dataContainer = document.getElementById('data-container');
const nextBtn = document.getElementById('next-btn');

// 封装请求数据的函数
function fetchData(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      const response = JSON.parse(xhr.responseText);
      // 渲染数据（示例为简单拼接JSON字符串，可根据需求自定义）
      dataContainer.innerHTML += `<pre>${JSON.stringify(response, null, 2)}</pre><hr>`;
      // 更新下一页URL
      nextPageUrl = response.next_page_url;
      // 控制按钮状态：有下一页则启用，否则禁用
      nextBtn.disabled = !nextPageUrl;
    } else {
      console.error('请求失败:', xhr.statusText);
    }
  };
  xhr.onerror = function() {
    console.error('网络请求错误');
  };
  xhr.send();
}

// 初始加载第一页数据（替换成你的初始接口URL）
fetchData('https://your-federal-registry-api.com/first-page');

// 绑定按钮点击事件
nextBtn.addEventListener('click', function() {
  if (nextPageUrl) {
    fetchData(nextPageUrl);
  }
});

关于嵌套函数的适用性 #

嵌套函数是可以用的，比如你可以把请求的回调逻辑嵌套在按钮点击事件里，但这样会导致代码复用性差，多次嵌套后可读性也会下降。更推荐像上面这样把请求逻辑抽成独立函数，不管是初始加载还是分页加载都调用同一个函数，代码更简洁易维护。如果是为了用闭包保存某些状态（比如避免全局变量），也可以用嵌套函数，但没必要为了嵌套而嵌套，优先保证代码的清晰性。

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