如何在网站中执行Python文件/函数？JS与Python交互流程求助

你猜的没错——前端JavaScript无法直接执行本地Python脚本，必须通过Web后端服务来实现触发。下面给你一个零门槛的方案，用轻量Python Web框架Flask快速搭建后端，完成你的整个流程：

核心流程梳理 #

前端按钮点击 → JS收集变量并发送请求到后端 → 后端Python脚本执行数据收集 → 后端返回数据给JS → JS渲染页面内容（不需要额外存JSON文件，直接返回数据更高效；如果需要持久化数据再写入JSON）

步骤1：搭建Flask后端服务 #

1. 先安装Flask：

   pip install flask
   

2. 创建app.py文件，写入以下代码：

   from flask import Flask, request, jsonify
   import json
   
   app = Flask(__name__)
   
   # 定义接收前端请求的接口
   @app.route('/run-python', methods=['POST'])
   def run_python_script():
       # 接收JS传过来的变量
       js_data = request.get_json()
       page_variable = js_data.get("page_var")
   
       # 这里写你的数据收集逻辑，用拿到的page_variable
       # 示例：模拟收集数据
       collected_data = {
           "original_variable": page_variable,
           "python_collected": "从第三方/数据库获取的额外数据",
           "timestamp": "2024-05-20 12:00:00"
       }
   
       # 可选：如果需要持久化数据，写入JSON文件
       with open('collected_data.json', 'w', encoding='utf-8') as f:
           json.dump(collected_data, f, ensure_ascii=False, indent=2)
   
       # 将数据返回给前端JS
       return jsonify(collected_data)
   
   if __name__ == '__main__':
       # 启动服务，默认端口5000
       app.run(debug=True)
   

步骤2：写前端HTML+JS代码 #

创建index.html文件，内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<body>
    <button id="actionBtn">点击触发Python脚本</button>
    <!-- 用来展示结果的容器 -->
    <div id="contentContainer" style="margin-top: 20px;"></div>

    <script>
        document.getElementById('actionBtn').addEventListener('click', async () => {
            // 步骤1：从页面获取变量（示例：这里直接模拟，替换成你的实际获取逻辑）
            const pageVariable = document.querySelector("#someInput")?.value || "默认变量值";

            try {
                // 步骤2：发送请求到后端接口，触发Python脚本
                const response = await fetch('http://localhost:5000/run-python', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ page_var: pageVariable })
                });

                // 步骤3：接收后端返回的数据
                const resultData = await response.json();

                // 步骤4：用数据生成网页内容
                const container = document.getElementById('contentContainer');
                container.innerHTML = `
                    <h3>处理结果</h3>
                    <p>页面传入的变量：${resultData.original_variable}</p>
                    <p>Python收集的额外数据：${resultData.python_collected}</p>
                    <p>处理时间：${resultData.timestamp}</p>
                `;
            } catch (error) {
                console.error('请求失败:', error);
                alert('触发失败，请检查后端服务是否启动');
            }
        });
    </script>
</body>
</html>

步骤3：运行测试 #

1. 启动后端服务：打开终端，进入文件所在目录，执行

   python app.py
   

   看到类似Running on http://127.0.0.1:5000的提示，说明服务启动成功。
2. 打开前端页面：
   • 最简单的方式：直接用浏览器打开index.html文件
   • 解决跨域问题：把index.html放到Flask项目的static文件夹里，然后访问http://localhost:5000/index.html
3. 点击按钮，就能看到页面渲染出Python返回的数据了。

注意事项 #

• 跨域问题：如果前端用file://协议打开，浏览器会拦截跨域请求，把HTML放到Flask的static目录下用http访问即可解决。
• 生产部署：如果要上线，需要把Flask服务部署到云服务器，用Gunicorn作为WSGI服务器，配合Nginx做反向代理（开发阶段用app.run()足够）。
• 数据持久化：如果不需要把数据存到JSON文件，直接返回jsonify(collected_data)就行，省去文件读写步骤。

内容的提问来源于stack exchange，提问作者Y0rc