### 如何在 JavaScript 中使用 Flask 定义的全局变量 为了使 JavaScript 能够访问由 Flask 定义的全局变量，通常的做法是在模板渲染阶段将这些 Python 变量传递给前端页面中的 JavaScript 部分。这可以通过 Jinja2 模板引擎来实现。 #### 方法一：直接嵌入到 HTML 页面内的 `<script>` 标签中 当服务器端通过 `render_template` 函数向客户端发送响应时，可以利用 Jinja2 的语法结构把 Python 数据注入到 HTML 文件里的内联脚本部分： ```html <script type="text/javascript"> var appName = "{{ appname }}"; // 使用Jinja2语法获取Python变量并赋值给JS变量 </script> ``` 这种方法适用于简单的字符串或数值类型的变量传递[^1]。 对于更复杂的数据类型比如列表、字典等，则建议先将其转换成 JSON 字符串再传送给 JavaScript: ```python import json from flask import jsonify @app.context_processor def utility_processor(): complex_data = {"key": "value"} return dict(complexData=json.dumps(complex_data)) ``` 接着可以在HTML文件中这样写： ```html <script type="application/json" id="complex-data">{{ complexData|safe }}</script> <script type="text/javascript"> const jsonData = document.getElementById('complex-data').textContent; let parsedJson = JSON.parse(jsonData); </script> ``` 这里的 `json.dumps()` 将 Python 对象序列化为 JSON 格式的字符串；而 `JSON.parse()` 则用于反序列化该字符串以便于 JavaScript 解析和操作。 #### 方法二：作为 AJAX 请求的目标 URL 来动态加载数据 如果不想让所有的配置项都暴露在初始加载时刻，也可以考虑设置专门的 API 接口供 JavaScript 发起异步请求调用来获取所需的信息。这种方式更加灵活安全，特别是涉及到敏感信息的时候[^4]。 例如，在视图函数中定义一个新的路由来提供特定资源： ```python @app.route("/get_config") def get_config(): config = { 'appName': current_app.name, # 更多配置... } return jsonify(config) ``` 然后在前端使用 Fetch 或者 jQuery.ajax() 等方法发起 HTTP GET 请求读取此接口返回的结果: ```javascript fetch('/get_config') .then(response => response.json()) .then(data => console.log(data.appName)); ```