Javascript Flisk和JS错误：未捕获的Syntax错误：意外的令牌'<'

FlaskWeb应用程序的这一部分试图从数据库表中读取数据，并使用执行此操作的JavaScript文件以HTML格式呈现它，并在加载所有包含在单个Flask应用程序中的HTML网站时调用该文件.

我try 将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')

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

错误Uncotted SyntaxHelp:意外标记""通常表示浏览器正在try 将HTML解析为JavaScript.当加载的JavaScript文件包含HTML内容而不是有效的JavaScript代码时，通常会发生这种情况.

我仍然无法找到一种方法让浏览器显示表中没有数据，该表是空的，但应该按照JS if声明解析下面的消息:

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

我很感激任何关于我可以做些什么来继续调试这个的指导.