为什么包含AJAX功能的JS文件更新代码后无法正常运行？

根本原因及修复方案 #

1 JS语法错误导致全脚本失效 #

你在声明变量时出现了语法问题：

// 错误写法：searchBtn没有加声明关键字
const searchBar = document.querySelector(".users .search input");
searchBtn = document.querySelector(".users .search button");

searchBtn没有加const/let关键字，属于隐式创建全局变量，在严格模式下会直接抛出错误，导致整个JS脚本终止运行，所以原本正常的搜索按钮功能也会失效。
修复方法：给searchBtn加上声明关键字：

const searchBar = document.querySelector(".users .search input");
const searchBtn = document.querySelector(".users .search button");

2 AJAX请求触发500服务器错误 #

你遇到的报错对应php/users.php接口返回500内部错误，原因有两个：

• 该PHP文件使用了$_SESSION变量，但顶部没有加session_start()，导致无法读取session中的unique_id，SQL语句执行报错触发500。
• 你当前的php/users.php是用来输出完整页面HTML的，并不适合作为AJAX接口，后续就算修复了报错，返回的全量HTML也无法直接用来渲染用户列表。
  修复方法：
  单独创建php/get_users.php作为专属AJAX接口，顶部先加session_start()，查询完用户列表后直接返回JSON格式数据即可。

3 之前重启才生效的原因是浏览器缓存 #

浏览器会默认缓存静态的JS文件，你修改完JS后如果只是普通刷新页面，浏览器可能还是用的旧缓存的JS代码，重启电脑后缓存被清空才会加载新代码。后续修改完JS可以直接按Ctrl+F5强制刷新页面，不需要重启电脑。

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