使用Flask开发Web应用时页面表格无法显示的问题求助

首先，咱们先搞定你遇到的Uncaught ReferenceError: table is not defined错误——这个问题根源很明确：你代码里写的$(table)里的table既不是已定义的变量，也不是合法的jQuery选择器（如果是选择器得用引号括成$('table')，但这里也不对）。你之前创建的表格元素存在div变量里，所以这里得引用这个正确的变量。

接下来，咱们还要调整表格渲染的逻辑，让数据能正常显示在页面上。下面是修正后的JavaScript代码，我会标注关键修改点：

$(function() {
    $.ajax({
        url: '/getDetails',
        type: 'GET',
        success: function(res) {
            // 1. 创建表格容器和表头，变量名更清晰
            var table = $('<table>').attr('class', 'table table-striped'); // 用Bootstrap表格样式更适配
            var headerRow = $('<tr>');
            // 根据你的JSON字段添加表头，假设是Title和Data
            headerRow.append($('<th>').text('标题')).append($('<th>').text('数据'));
            table.append(headerRow);

            // 2. 解析JSON数据
            var wishObj = JSON.parse(res);

            // 3. 循环遍历数据，逐个添加表格行
            $.each(wishObj, function(index, value) {
                var dataRow = $('<tr>');
                dataRow.append($('<td>').text(value.Title)).append($('<td>').text(value.Data));
                table.append(dataRow);
            });

            // 4. 将完整表格插入到页面容器中
            $('.jumbotron').append(table);
        },
        error: function(error) {
            console.log(error);
        }
    });
});

关键修改说明： #

• 修复ReferenceError：移除了错误的$(table)引用，改用明确创建的table变量构建表格。
• 优化表格结构：把原本的list-group替换成Bootstrap的table系列样式（list-group是为列表设计的，表格用专属样式更合适），同时添加了清晰的表头。
• 简化渲染逻辑：不再克隆整个表格，而是循环创建单独的数据行，避免重复添加表头，结构更合理。
• 变量命名更直观：把原来的div变量改成table，符合元素类型，减少混淆。

另外还有几个小建议可以优化你的代码：

1. Flask路由里推荐直接返回JSON响应，不用手动转字符串：

   @app.route('/getDetails')
   def getDetails():
       try:
           # 获取数据到academic_dict
           return jsonify(academic_dict)  # 自动设置正确的Content-Type响应头
       except Exception as e:
           return render_template('error.html', error=str(e))
   

   这样前端就不用再调用JSON.parse(res)，直接用res对象即可。

2. Flask中静态资源路径推荐用url_for生成，避免路径错误：

   <script src="{{ url_for('static', filename='js/jquery-1.11.2.js') }}"></script>
   <script src="{{ url_for('static', filename='js/getAcademic.js') }}"></script>
   

   这样即使应用部署在子路径下，资源也能正确加载。

按照上面的修改，你的JSON数据应该就能正常渲染成表格显示在profile.html页面上了。

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