Flask+JS报错：Uncaught SyntaxError: Unexpected token '<' 排查求助

一、解决Uncaught SyntaxError: Unexpected token '<'错误 #

• 检查Flask数据接口返回值
  确保你的数据接口路由返回纯JSON数据，而非HTML页面。如果误用render_template返回模板，浏览器会把HTML当作JS解析，触发<符号语法错误。正确示例：

  from flask import jsonify
  
  @app.route('/api/get-data')
  def get_data():
      # 数据库查询逻辑
      db_data = YourModel.query.all()
      # 转换为可序列化的字典列表
      data_list = [item.to_dict() for item in db_data]
      return jsonify(data_list)
  

• 验证JS请求的URL
  确认JS中fetch/axios请求的是正确的接口路由，而非页面路由（比如不要请求/，要请求/api/get-data这类专门的接口）。
• 修正外部JS文件引用路径
  用Flask的url_for生成静态文件路径，避免路径错误导致返回404 HTML页面被当作JS解析。示例：

  <script src="{{ url_for('static', filename='js/data-loader.js') }}"></script>
  

• 查看网络请求响应
  打开浏览器开发者工具（F12）→「网络」标签，找到JS请求的接口，查看响应内容。如果响应是HTML（比如404页面、首页模板），直接修正路由或路径问题。

二、实现空表显示“No data available” #

• 预先准备空状态元素
  在表格tbody中默认添加空状态行，初始隐藏：

  <table id="data-table">
      <thead>
          <tr>
              <th>ID</th>
              <th>名称</th>
          </tr>
      </thead>
      <tbody id="table-body">
          <tr id="empty-row" style="display: none;">
              <td colspan="2">No data available</td>
          </tr>
      </tbody>
  </table>
  

• 在JS回调中判断数据长度
  获取数据后根据长度切换显示逻辑：

  document.addEventListener('DOMContentLoaded', async () => {
      const tableBody = document.getElementById('table-body');
      const emptyRow = document.getElementById('empty-row');
      try {
          const res = await fetch('/api/get-data');
          if (!res.ok) throw new Error('请求失败');
          const data = await res.json();
  
          if (data.length === 0) {
              emptyRow.style.display = 'table-row';
          } else {
              emptyRow.style.display = 'none';
              // 渲染数据行
              data.forEach(item => {
                  const row = document.createElement('tr');
                  row.innerHTML = `<td>${item.id}</td><td>${item.name}</td>`;
                  tableBody.appendChild(row);
              });
          }
      } catch (err) {
          console.error('加载数据出错:', err);
          emptyRow.textContent = '加载数据失败，请重试';
          emptyRow.style.display = 'table-row';
      }
  });
  

• 注意渲染顺序
  如果需要支持数据刷新，先清空tbody现有内容，再执行渲染或空状态显示逻辑，避免重复添加行。

内容的提问来源于stack exchange，提问作者Christián De Achával