### 如何在JavaScript文件中读取Python生成的多个变量 当涉及到前后端交互时，通常会遇到需要从前端（JavaScript）获取后端（Python）生成的数据的情况。一种常见的方式是通过HTTP请求来实现这种通信。对于静态页面而言，在构建HTML文档的过程中嵌入这些变量也是一种可行的办法。 #### 方法一：利用模板引擎预渲染 如果使用的是Web框架如Flask或Django，则可以借助其内置的模板功能。这允许服务器端代码直接向客户端发送含有特定值的HTML响应。例如： ```jinja2 <script> const pythonVar1 = {{ variable_from_python }}; </script> ``` 这种方式适用于那些不需要频繁更新的内容[^1]。 #### 方法二：AJAX 请求 JSON 数据 更灵活的做法是从前端发起异步调用至API接口，从而获得最新的计算结果或其他形式的信息。此时应确保返回的数据格式为JSON对象，以便于解析并赋值给相应的JavaScript变量。下面是一个简单的例子说明如何设置这样的流程： ##### 后端部分（假设采用Flask） ```python from flask import Flask, jsonify app = Flask(__name__) @app.route('/api/data') def get_data(): data = { 'key1': value1, 'key2': value2, # 更多键值对... } return jsonify(data) if __name__ == '__main__': app.run(debug=True) ``` ##### 前端部分 ```javascript fetch('/api/data') .then(response => response.json()) .then(jsonData => { console.log(`Received key1=${jsonData.key1}, key2=${jsonData.key2}`); // 将接收到的数据分配给全局变量或者其他作用域内的变量 window.pythonGeneratedVariables = jsonData; }); ``` 这种方法不仅限定了数据交换的标准方式——RESTful API设计模式下的GET/POST等操作；而且由于采用了无刷新加载技术，用户体验也会更加流畅自然[^2]。 #### 方法三：WebSocket 实现双向通讯 对于实时性强的应用场景来说，建立持久连接可能是更好的选择。这时就可以考虑引入WebSocket协议了。它支持全双工通信模型，即服务端能够主动推送消息给浏览器端而无需等待用户的显式请求。不过需要注意的是，维护长链接可能会带来额外的成本开销以及复杂度提升。 ---