使用JS和Handlebars添加用户后无法渲染新页面的问题排查

我来帮你一步步排查这个问题，核心原因其实和AJAX的工作机制以及你服务器端的响应方式有关，咱们拆解来看：

1. 先搞懂为什么页面没渲染：AJAX的响应不会自动替换当前页面 #

你用AJAX发送请求的逻辑，和普通表单提交完全不一样——普通表单提交后，服务器返回的页面会直接让浏览器加载跳转；但AJAX是在后台异步发送请求，服务器返回的内容只会存在AJAX的响应对象里，不会自动替换当前页面。而你现在的addRow()函数里，成功回调的代码块是空的，所以拿到服务器返回的adminDash页面内容后，啥也没做，页面自然不会变化。

排查操作：

• 打开浏览器开发者工具（按F12），切换到「Network」标签；
• 点击「Add User」按钮，找到/insert-user的请求，查看「Response」标签页，看看是不是已经返回了adminDash的页面HTML。如果是，说明服务器没问题，问题完全出在客户端没处理这个响应。

2. 修正客户端AJAX的成功回调：主动处理页面跳转或替换 #

既然AJAX不会自动触发页面跳转，那你需要在成功回调里添加明确的处理逻辑：

• 最简单的方式：直接跳转到adminDash的页面路由（假设你的adminDash页面路由是/adminDash），把这段代码加到if (req.status >=200 && req.status <400)的分支里：

  window.location.href = '/adminDash';
  

• 如果你想直接用服务器返回的HTML替换当前页面（不跳转URL），可以写：

  document.body.innerHTML = req.responseText;
  

3. 修复服务器端的参数获取bug（潜在隐患） #

你客户端用的是GET请求，参数是拼在URL里的，但服务器端却用req.body去拿参数——这是错误的！GET请求的参数应该用req.query来获取，req.body是用来处理POST请求的表单/JSON数据的。虽然你说数据插入成功了，可能是测试时的巧合，但这个bug必须修正，不然以后肯定会出问题：
把服务器端的代码改成：

app.get('/insert-user',function(req,res){
  var context = {};
  pool.query("INSERT INTO user (`fname`, `lname`, `email`, `password`,`timestamp`,`company`) VALUES (?,?,?,?,NOW(),?)", 
    [req.query.fname, req.query.lname, req.query.email, req.query.password, req.query.company], 
    function(err, result){
      if(err){
        console.log(err);
        next(err);
        return;
      }
      // 这里更推荐用redirect而非直接render：数据处理路由应该引导浏览器跳转到页面路由
      res.redirect('/adminDash'); 
      console.log("Success");
    });
});

这里把res.render改成res.redirect更合理——处理数据插入的路由只负责完成操作，然后告诉浏览器跳转到页面路由，这样不管是AJAX请求还是普通表单提交，都能正确跳转。

4. 可选简化方案：不用AJAX，用普通表单提交 #

如果你的需求只是提交表单后跳转到adminDash，其实没必要用AJAX，反而增加了复杂度。可以这么改：

• 给表单加上action="/insert-user"和method="POST"（强烈建议用POST，密码用GET会暴露在URL里，不安全）；
• 去掉按钮的onclick="addRow()"，也去掉event.preventDefault()；
• 服务器端改成app.post('/insert-user')，用req.body拿参数（记得要提前配置express.urlencoded()中间件），提交后服务器用res.redirect('/adminDash')引导跳转，这样页面会自动刷新到目标页面，逻辑更简单安全。

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