如何将JS变量传入Python函数并将Python输出存为JS变量（含HTML整合）

方案一：Flask + Ajax #

适合以Python为核心处理逻辑的场景，通过Flask提供HTTP接口，前端用Ajax完成请求发送与结果接收。

1. 改造Flask后端（app.py） #

from flask import Flask, request, jsonify

app = Flask(__name__)

def foo(input_str):
    # 替换为你的实际计算逻辑
    return f"处理后的结果：{input_str.upper()}"

@app.route('/process-data', methods=['POST'])
def process_data():
    input_data = request.json.get('input')
    if not input_data:
        return jsonify({'error': '缺少输入参数'}), 400
    result = foo(input_data)
    return jsonify({'output': result})

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

2. 改造前端HTML（index.html） #

替换原静态span为输入控件，添加触发交互逻辑：

<link rel="stylesheet" href="fonts.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>Type here: <input type="text" id="inputField" placeholder="输入内容"/><button id="submitBtn">提交</button></p>
<p>结果：<span id="result"></span></p>
<script>
var inputField = document.getElementById('inputField');
var submitBtn = document.getElementById('submitBtn');
var resultSpan = document.getElementById('result');
var outputData;

submitBtn.addEventListener('click', function() {
    var inputData = inputField.value.trim();
    if (!inputData) return;

    $.ajax({
        url: '/process-data',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({'input': inputData}),
        success: function(response) {
            outputData = response.output;
            resultSpan.textContent = outputData;
            console.log('获取到的结果：', outputData);
        },
        error: function(err) {
            console.error('请求失败：', err);
        }
    });
});
</script>

运行步骤：

1. 安装Flask：pip install flask
2. 启动服务：python app.py
3. 浏览器打开http://localhost:5000测试

方案二：Node.js + Express + Child Process #

基于你已实现的Node调用Python逻辑，通过Express搭建Web服务，转发前端请求到Python脚本。

1. 搭建Express服务器（server.js） #

先安装依赖：npm install express body-parser

const express = require('express');
const bodyParser = require('body-parser');
const spawner = require('child_process').spawn;
const app = express();

app.use(bodyParser.json());
app.use(express.static('.')); // 托管静态HTML文件

app.post('/run-python', (req, res) => {
    const data_in = req.body.input;
    if (!data_in) {
        return res.status(400).json({error: '缺少输入参数'});
    }

    const python_process = spawner('python', ['./app.py', data_in]);

    python_process.stdout.on('data', (data) => {
        const result = data.toString().trim();
        res.json({output: result});
    });

    python_process.stderr.on('data', (data) => {
        console.error('Python脚本错误：', data.toString());
        res.status(500).json({error: '脚本执行出错'});
    });
});

const PORT = 3000;
app.listen(PORT, () => {
    console.log(`服务器运行在 http://localhost:${PORT}`);
});

2. 改造Python脚本（app.py） #

让脚本支持命令行传参，并打印结果供Node捕获：

import sys

def foo(input_str):
    # 替换为你的实际计算逻辑
    return f"处理后的结果：{input_str.upper()}"

if __name__ == '__main__':
    if len(sys.argv) < 2:
        print("缺少输入参数")
        sys.exit(1)
    input_data = sys.argv[1]
    result = foo(input_data)
    print(result)

3. 前端HTML（index.html） #

与Flask方案前端逻辑一致，仅修改请求地址：

<link rel="stylesheet" href="fonts.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>Type here: <input type="text" id="inputField" placeholder="输入内容"/><button id="submitBtn">提交</button></p>
<p>结果：<span id="result"></span></p>
<script>
var inputField = document.getElementById('inputField');
var submitBtn = document.getElementById('submitBtn');
var resultSpan = document.getElementById('result');
var outputData;

submitBtn.addEventListener('click', function() {
    var inputData = inputField.value.trim();
    if (!inputData) return;

    $.ajax({
        url: '/run-python',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({'input': inputData}),
        success: function(response) {
            outputData = response.output;
            resultSpan.textContent = outputData;
            console.log('获取到的结果：', outputData);
        },
        error: function(err) {
            console.error('请求失败：', err);
        }
    });
});
</script>

运行步骤：

1. 确认依赖已安装：npm install express body-parser
2. 启动Node服务：node server.js
3. 浏览器打开http://localhost:3000测试

内容的提问来源于stack exchange，提问作者riyaz.a