Flask 和 JS 错误：未捕获的语法错误：意外的标记 '<'

Question

Flask Web 应用程序的这一部分尝试从数据库表中读取数据，并使用执行此操作的 Javascript 文件以 HTML 格式呈现数据，并在加载全部包含在单个 Flask 应用程序中的 HTML 站点时调用。

我尝试将 JS 脚本移至 HTML 文件本身，但得到与调用 JS 文件相同的错误。

我在浏览器控制台中看到的错误有两个：

Uncaught SyntaxError: Unexpected token '<' (at VM214 tabTables.js:1:1) VM214 tabTables.js:1

Uncaught SyntaxError: Unexpected token '<' (at tabTables.js:1:1) tabTables.js:1

我的 JS 脚本调用的 HTML 代码是这样的：

{% block content %}
<h2>{% block title %}Admin{% endblock %}</h2>
<div class="admin-container">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="user-tab" data-toggle="tab" href="#user" role="tab" aria-controls="user" aria-selected="true">User List</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="product-tab" data-toggle="tab" href="#product" role="tab" aria-controls="product" aria-selected="false">Product List</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="user" role="tabpanel" aria-labelledby="user-tab">
            <table id="user-table" class="table">
                <!-- User list table content will be loaded here dynamically -->
            </table>
        </div>
        <div class="tab-pane fade" id="product" role="tabpanel" aria-labelledby="product-tab">
            <table id="product-table" class="table">
                <!-- Product list table content will be loaded here dynamically -->
            </table>
        </div>
    </div>
</div>
{% block javascript %}
<!-- Include JavaScript file specific to the admin page -->
<script src="{{ url_for('static', filename='tabTables.js') }}"></script>
{% endblock %}
{% endblock %}

我从 HTML 调用的 Javascript 代码是这样的：

<script>
    // Function to load user or product list based on active tab
    function loadList(tabId, tableName) {
        $.ajax({
            url: '/load_list',
            method: 'POST',
            data: { table: tableName },
            success: function(response) {
                console.log('Response received:', response); // Log the response
                if (response.trim() === '') {
                    // Display a message indicating that the table is empty
                    $(tabId).html('<p>No data available.</p>');
                } else {
                    $(tabId).html(response);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error); // Log the error
                // Display an error message
                $(tabId).html('<p>Error loading data.</p>');
            }
        });
    }

    // Event listener for tab switching
    $('#myTab a').on('shown.bs.tab', function (e) {
        var tabId = $(e.target).attr('href');
        var tableName = $(e.target).attr('data-table');
        loadList(tabId + '-table', tableName);
    });

    // Load user list initially
    loadList('#user-table', 'users');
</script>

带有该 HTML 页面路由的 Flask 应用程序部分是这样的：

# Route for the admin page
@app.route('/admin')
def admin():
    return render_template('admin.html')

我读了很多帖子，但找不到与这个问题相关的内容；我读过的主要反馈是：

错误 Uncaught SyntaxError: Unexpected token '<' typically indicates that the browser is trying to parse HTML as JavaScript. This usually occurs when the JavaScript file being loaded contains HTML content instead of valid JavaScript code.

我仍然无法找到一种方法让浏览器显示表中没有数据，该表是空的，但应该根据 JS if 语句解析以下消息：

if (response.trim() === '') {
                    // Display a message indicating that the table is empty
                    $(tabId).html('<p>No data available.</p>')

如果您能提供有关如何继续调试此问题的指导，我将不胜感激。

Answer 1

在 HTML 中，您有指向 JavaScript 文件的标记：

<script src="tabTables.js"></script>

该引用没有任何问题，但在它引用的 JavaScript 文件中，您指出它类似于以下内容：

<script>
//JavaScript code
</script>

JavaScript 文件不应包含 HTML 标记，这就是错误所指示的 - JS 文件的第一个字符是“<' and that's invalid syntax where it's at in JavaScript.

”

删除 JavaScript 周围的

<script>

标签，这应该可以正常工作。