为什么API分页跳转下一页的按钮功能异常，page参数突变为Next？

问题原因 #

• 触发了两次请求是核心问题，第一次是你写的逻辑触发的正常请求，第二次是异常逻辑触发的错误请求，page=Next和api_key参数异常都来自第二次请求。导致页面停留在第一页的原因是第二次异常请求触发了页面刷新，所有JS存储的分页状态（currentPage、nextPage等）全部重置为初始值。
• 常见的异常请求来源有两个：
  1. 你的next按钮是<form>标签内的默认提交按钮，没有设置type="button"，点击时自动触发了表单提交行为：如果按钮自身的value设置为Next、且name设置为page，表单提交时就会自动把page=Next拼到请求路径里，同时表单提交会刷新页面。
  2. 你给next按钮重复绑定了两次点击事件，另一个你没注意到的点击监听器逻辑错误，直接把按钮的文本内容Next作为page参数传入，且拼接URL时写错了api_key的参数名，才会出现第二次异常请求。

解决方法 #

1. 先修改按钮的HTML定义，添加type="button"属性禁用默认提交行为，同时加preventDefault阻止默认事件：

<!-- 修改按钮定义 -->
<button id="next" type="button">Next</button>

// 修改点击监听逻辑，阻止默认行为
next.addEventListener('click', (e)=>{
    e.preventDefault();
    if(nextPage <= totalPages){
        pageCall(nextPage);
    } 
})

2. 全局搜索所有给next元素绑定click事件的代码，删除重复的错误绑定逻辑。你可以在浏览器调试工具的「元素-事件监听器」面板里，选中next按钮查看所有绑定的click事件，定位多余的事件来源。
3. 检查lastUrl的初始赋值逻辑，确认初始的URL里api_key参数是完整的api_key=你的密钥格式，避免后续拼接参数时丢失参数名。

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