如何在HTML中调用Python函数并将返回结果展示在页面上

技术选型说明 #

你提到的技术中，Flask 完全匹配需求，属于轻量Web框架，非常适合快速搭建接口接收前端参数、调用Python函数返回结果；Fetch API（原生JS自带）/AJAX 用来实现前端异步请求，不需要刷新页面就能拿到结果渲染，不需要额外引入jQuery，JSON是前后端传参的标准格式会用到。Django重量太高，这个小需求没必要使用。

实现步骤 #

1. 安装依赖

只需安装Flask和跨域处理工具，命令如下：

pip install flask flask-cors

2. 编写后端启动文件

在和crypto.py同级的目录下新建app.py，代码如下：

from flask import Flask, request, jsonify
from flask_cors import CORS
# 导入你自己写的转换函数
from crypto import convert

app = Flask(__name__)
# 允许本地调试跨域
CORS(app)

# 定义转换接口
@app.route('/api/convert', methods=['POST'])
def convert_handler():
    # 接收前端传的下拉框选中值
    params = request.get_json()
    first_val = params.get('first')
    second_val = params.get('second')
    # 调用你的业务逻辑函数
    result = convert(first_val, second_val)
    # 按JSON格式返回结果
    return jsonify({"result": result})

if __name__ == '__main__':
    # 本地启动服务，端口默认5000
    app.run(port=5000, debug=True)

你的crypto.py不需要做任何修改，保持原有逻辑即可。

3. 修改前端index.html代码

浏览器不能直接调用本地Python文件，需要改为请求后端接口，修改后的代码如下：

<select id="first">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>
<select id="second">
    <option value="d">D</option>
    <option value="e">E</option>
</select>
<button id="submit_btn" type="button" onclick="convertFunction()">Convert</button>
<div id="result"></div>
<script>
function convertFunction() {
    // 先获取两个下拉框的选中值
    const first = document.getElementById('first').value;
    const second = document.getElementById('second').value;
    // 异步请求后端接口
    fetch('http://127.0.0.1:5000/api/convert', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({first: first, second: second})
    })
    .then(res => res.json())
    .then(data => {
        // 将返回的结果渲染到页面
        document.getElementById('result').innerText = data.result;
    })
    .catch(err => {
        document.getElementById('result').innerText = '请求错误：' + err;
    })
}
</script>

4. 运行测试

1. 先启动后端服务：执行python app.py，看到服务启动成功提示即可
2. 直接打开修改后的index.html，选择下拉框选项点击Convert按钮即可看到转换结果

可选优化（不需要跨域配置） #

如果不想单独打开HTML文件，可以把index.html放到项目下新建的templates文件夹中，在app.py中新增路由：

from flask import render_template

@app.route('/')
def index_page():
    return render_template('index.html')

之后直接访问http://127.0.0.1:5000即可打开页面，JS中的fetch地址可以简化为/api/convert，也不需要再安装flask-cors处理跨域。

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