使用AJAX无需刷新页面展示Mongoose相关数据的问题排查

问题排查&修复点 #

1. 前端按钮配置错误

• 内联事件绑定写法错误：onclick="loadAjax"没有加函数调用括号，也没有传入需要的参数，正确写法示例（假设你要传输入框的值）：onclick="loadAjax(document.getElementById('输入框ID').value)"
• 按钮默认行为冲突：type设为submit如果包裹在form标签内，点击会触发默认表单提交刷新页面，建议改成type="button"，或者在事件回调中添加阻止默认行为逻辑。
• 示例修复后按钮代码：

<button class="btn btn-primary" onclick="loadAjax(document.getElementById('asin-input').value)" type="button">Go</button>

2. AJAX逻辑多处不匹配

• 函数作用域错误：loadAjax定义在$(document).ready的回调内部，属于局部函数，全局作用域的内联onclick访问不到，要么把函数提到全局作用域，要么改用jQuery事件绑定替代内联onclick。
• 请求配置和服务端完全不匹配：服务端暴露的是GET /system接口，你AJAX写的是POST /，路径、请求方法全部对不上，要改成url: "/system"、method: "GET"。
• 响应处理逻辑不匹配：服务端目前用res.render返回完整页面，你要局部刷新的话要么让服务端返回需要的HTML片段，要么返回JSON数据前端自己拼接渲染，不能直接把完整页面塞到#ajax-meth节点里。
• 语法错误：你写的$(document).ready(function() { ... })(jQuery)是错误的IIFE写法，正确的包裹写法是：

(function($) {
  $(document).ready(function() {
    // 逻辑代码
  })
})(jQuery);

3. 服务端逻辑错误

• 拼写错误：foundData.lengh应为foundData.length，少了字母t，会导致空数据判断永远不生效。
• 异步逻辑顺序错误：Asin.insertMany是异步操作，你现在写完插入逻辑直接调用res.redirect，插入还没执行完成就跳转，会导致刚插入的数据查询不到，要把跳转/返回逻辑写到insertMany的回调里。
• AJAX请求不能返回重定向：浏览器收到AJAX请求的302响应会自动跟随跳转，不会把跳转后的内容返回给success回调，你需要用req.xhr判断是否是AJAX请求，AJAX请求直接返回数据，普通页面请求才返回重定向或者完整页面。
• 示例修复后的服务端逻辑片段：

app.get("/system", function(req, res) {
  if(!req.isAuthenticated()){
    if(req.xhr) return res.status(401).json({msg: '未登录'})
    return res.redirect("/login"); 
  }
  Asin.find({},function(err,foundData){
    if(err) return res.status(500).send(err)
    if(foundData.length === 0){
      Asin.insertMany(defaultAsin,function(err){
        if(err){
          console.log(err);
          return res.status(500).send(err)
        }
        // 插入完成后再查询再返回
        Asin.find({}, function(err, newData) {
          if(req.xhr) {
            // 返回局部渲染的HTML或者JSON
            res.render('partials/system-data', {amzAsinData: newData}, (err, html) => {
              res.json({html: html})
            })
          } else {
            res.render("system",{amzAsinData: newData});
          }
        })
      });
    }else{
      if(req.xhr) {
        res.render('partials/system-data', {amzAsinData: foundData}, (err, html) => {
          res.json({html: html})
        })
      } else {
        res.render("system",{amzAsinData: foundData});
      }
    }
  });
});

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