JS 可以嵌入 Flask 模板中，但不能嵌入单独的文件中

问题描述 投票：0回答：1

下午好！

我正在开发 Flask 应用程序。在一个名为 

reserve.html
的模板（HTML 文件）中，我有一个嵌入的 JS 块，它工作得很好。当我尝试将其移动到单独的文件 (
static/reserve.js
) 以使 HTML 更具可读性时，我在 Chrome 的控制台中收到此“未捕获的错误”：

Uncaught SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2)
    at JSON.parse (<anonymous>)
    at reserve.js:1:21

（

reserve.js
按照Flask的要求正确放置在“static”文件夹中）

这是错误所指的行（

reserve.js
的第1行，我使用 JSON 将 Python 字典转换为 JS 对象）：

var day_list = JSON.parse('{{ day_list|tojson }}');

字典来自Python文件

daylist.py
，数据通过Flask应用程序
main.py
发送到
reserve.html
模板。从那里，它使用 JSON 字符串解析为 JS 对象，如上一行所示。

我尝试了几种修复引号的方法（以避免多个“或'相互冲突），但错误并没有消失。

这是嵌入了 JS 的 

reserve.html
，它可以工作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Make a reservation</h1>

    <h2>Choose a day:</h2>

    <script>
        var day_list = JSON.parse('{{ day_list|tojson }}');

        function today(button_id, div_id) {
            var button = document.getElementById(button_id);
            var div = document.getElementById(div_id);

            if (div.style.display == "block") {
                div.style.display = "none";
                button.style.backgroundColor = "white";
            } else {
                div.style.display = "block";
                button.style.backgroundColor = "blue";
            }

            for (const day in day_list) {
                if (day_list[day].num != button_id) {
                    document.getElementById(day_list[day].num).style.backgroundColor = "white";
                    document.getElementById(day_list[day].name).style.display = "none";
                }
            }
        }

        for (const day in day_list) {
            console.log(day_list[day]);
        }
    </script>

    {% for day in day_list %}
        <form id="{{ day.order }}" method="POST">
            <input
                type="button"
                id="{{ day.num }}"
                onclick="today(button_id='{{ day.num }}', div_id='{{ day.name }}')"
                value="{{ day.num }}"
                style="background-color: white;"
            >

            <div id="{{ day.name }}" style="display: none;">
                <label>Hello</label>
            </div>
        </form>
    {% endfor %}
</body>
</html>

如果有帮助的话，这里是

main.py
的相关部分：

from flask import Flask, render_template
from daylist import list_days

app = Flask(__name__)

@app.route('/create-reservation/', methods = ["GET", "POST"])
def create_reservation():
    # if request.method == "POST":
    #     name = request.form.get("name")
    #     date = request.form.get("date")
    #     hours = request.form.get("hours").split()
    #     courts = request.form.get("courts").split()
    #     reserve(name, date, hours, courts)
    day_list = list_days()
    return render_template('reserve.html', day_list = day_list)

if __name__ == "__main__":
    app.run(debug=True)

现在，这里是 

reserve.html
，其中 JS 脚本是链接的而不是嵌入的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="{{ url_for('static', filename='reserve.js') }}"></script>
</head>
<body>
    <h1>Make a reservation</h1>

    <h2>Choose a day:</h2>

    {% for day in day_list %}
        <form id="{{ day.order }}" method="POST">
            <input
                type="button"
                id="{{ day.num }}"
                onclick="today(button_id='{{ day.num }}', div_id='{{ day.name }}')"
                value="{{ day.num }}"
                style="background-color: white;"
            >

            <div id="{{ day.name }}" style="display: none;">
                <label>Hello</label>
            </div>
        </form>
    {% endfor %}
</body>
</html>

这是

static/reserve.js
:

var day_list = JSON.parse('{{ day_list|tojson }}');

function today(button_id, div_id) {
    var button = document.getElementById(button_id);
    var div = document.getElementById(div_id);

    if (div.style.display == "block") {
        div.style.display = "none";
        button.style.backgroundColor = "white";
    } else {
        div.style.display = "block";
        button.style.backgroundColor = "blue";
    }

    for (const day in day_list) {
        if (day_list[day].num != button_id) {
            document.getElementById(day_list[day].num).style.backgroundColor = "white";
            document.getElementById(day_list[day].name).style.display = "none";
        }
    }
}

for (const day in day_list) {
    console.log(day_list[day]);
}

如果您想了解更多可能有帮助的详细信息，请发表评论。

javascript json flask syntax-error jsonparser
1个回答
0
投票

Jinja，Flask 内置的模板引擎，仅限于模板并在服务器端解释模板中包含的所有表达式。静态文件（例如您的 JavaScript 文件）是从客户端获取的，并在必要时在其 JavaScript 引擎中进行解释。
Jinja 忽略这些文件。

因此，Jinja 不再考虑外包给 JavaScript 的表达式 

{{ data_list|tojson }}
并保留为字符串。 JavaScript 引擎无法理解代码的这些部分并抛出错误，因为它不是有效的 JavaScript 代码，或者在您的情况下不是 JSON 格式。

因此，只要特定行保留在模板中，您的代码就可以工作。

提示，不需要使用引号将数据转换为字符串，然后使用

JSON.parse(...)
再次解析。下面的作业就完全足够了。

const day_list = {{ day_list|tojson }};
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.