使用JQuery加载SQL数据到HTML表格时出现404错误求助

核心原因 #

前端AJAX请求的URL与后端Express路由不匹配，且未对应后端的POST请求方法，导致服务器无法找到目标接口返回404。

具体修复步骤 #

1. 修正前端AJAX代码 #

• 移除URL中多余的Tally.js段，匹配后端路由路径
• 指定请求方法为POST（后端路由定义的是router.post('/get1')）
• 遍历后端返回的response.data（后端响应格式为{data: [...]}）
• 将tbody中的<th>改为<td>（规范表格结构，<th>仅用于表头）

修正后的代码：

////// Form1
$.ajax({
  url: '/Tally/get1',
  type: 'POST',
  dataType: 'json',
  success: function(response) {
    var html = '';
    $.each(response.data, function(index, item) {
      html += '<tr>';
      html += '<td>' + item.VesselName + '</td>';
      html += '<td>' + item.VesselID + '</td>';
      html += '<td>' + item.OutboundVoyage + '</td>';
      html += '</tr>';
    });
    $('#Form1 tbody').append(html);
  },
  error: function(xhr, status, error) {
    console.log(xhr.responseText);
  }
});

2. 确认后端路由挂载路径 #

确保Express主文件中已将tally控制器路由挂载到/Tally路径，示例：

// 主app.js文件示例
const tallyRouter = require('./routes/tally/tally'); // 替换为你的控制器实际路径
app.use('/Tally', tallyRouter);

若挂载路径不同，需同步调整前端AJAX的URL。

3. 排查认证中间件影响 #

后端路由使用了auth中间件，若请求未携带有效认证信息（如session、token），可能被拦截。可通过浏览器开发者工具的Network标签查看请求响应状态码，若为401/403，需补充认证参数。

4. 优化模型层错误处理 #

当前模型层仅打印错误未抛出，导致控制器无法捕获并返回错误响应，建议修改：

"use strict"
const { gtos, gtosglobal, knex_once } = require('../config/database');
const moment = require('moment-timezone');

module.exports.loadVessel = async (req) => {
  try {
    return await req.gtos('[DT_VESSEL]')
      .select('VesselName', 'VesselID', 'OutboundVoyage')
      .orderBy('VesselID');
  } catch(err) {
    console.log(err);
    throw err; // 抛出错误让控制器捕获并返回
  }
}

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