Flask+AJAX场景下无法在HTML表格展示数据，请求技术协助

问题根源 #

你的代码核心问题在于：后端AJAX请求返回的是JSON格式数据，但前端直接将JSON对象作为HTML内容插入表格，浏览器无法将JSON对象解析为表格行元素。初始页面的表格渲染是服务器端Jinja2模板引擎完成的，但AJAX是客户端异步操作，不能再依赖Jinja的{% for %}语法，必须用JavaScript动态生成DOM元素。

解决方案 #

修改前端AJAX的success回调函数，遍历返回的JSON数据，手动生成表格行并插入到表格体中：

修改后的HTML/JavaScript代码 #

<!DOCTYPE html>
<html>
<head>
    <title>OBD-2 Data Display</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        h1 {
            text-align: center;
            margin-top: 50px;
        }
        table {
            margin: auto;
            border-collapse: collapse;
            border: 2px solid black;
            width: 50%;
            background-color: white;
        }
        th, td {
            padding: 10px;
            border: 1px solid black;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
        }
        th {
            background-color: #e6e6e6;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h2>Enter your input:</h2>
    <form id="submit-form">
        <label for="input">Input:</label>
        <input type="text" name="user_input" id="input"><br><br>
        <input type="submit" value="Submit">
    </form>
    <h1>OBD-2 Data Display</h1>
        <table id="data-table">
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody id="data-table-body">
                {% for key, value in data.items() %}
                    <tr>
                        <td>{{ key }}</td>
                        <td>{{ value }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#submit-form").submit(function(e) {
                e.preventDefault();
                var form_data = $(this).serialize();

                $.ajax({
                    type: "POST",
                    url: "/",
                    data: form_data,
                    success: function(data) {
                        // 清空表格现有内容
                        const tbody = $("#data-table-body");
                        tbody.empty();
                        
                        // 遍历JSON数据，生成表格行
                        for (const [key, value] of Object.entries(data)) {
                            const row = $("<tr>");
                            row.append($("<td>").text(key));
                            row.append($("<td>").text(value));
                            tbody.append(row);
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>

后端代码无需修改（确认返回JSON正确） #

你的Python代码已经正确返回jsonify(data)，只要flatten_dict(finaldic)能生成预期的字典格式，后端就没问题。

关键说明 #

1. 清空现有内容：在插入新数据前调用tbody.empty()，避免旧数据残留。
2. 遍历JSON对象：使用Object.entries(data)遍历键值对，比for...in更安全，避免遍历原型链上的属性。
3. 动态生成DOM：通过jQuery的$("<tr>")和$("<td>")创建表格元素，设置文本内容后插入到表格体中。

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