JS传参给Flask运行Python脚本返回结果到网页的代码问题

你现有代码存在4个会直接导致功能失效的问题：

• Python端缺失核心依赖导入：未导入Flask、request、render_template，运行会直接报NameError
• Python端参数读取逻辑错误：request.data读取的是原始字节流格式的请求体，jQuery POST默认发送表单格式数据，无法通过该方式拿到传入的参数
• JS端请求逻辑缺失：$.post未定义响应回调函数，且直接返回未声明的data变量，根本无法接收后端返回的处理结果
• 跨域拦截风险：如果本地直接打开HTML文件发送请求，会被浏览器跨域策略拦截，需要给后端加跨域支持

第一步：安装依赖 #

先在终端执行命令安装需要的库：
pip install flask flask-cors

第二步：修改Flask后端代码 #

from flask import Flask, request, render_template
from flask_cors import CORS
# 导入你自己的业务处理模块
import get_response

app = Flask(__name__)
# 开启跨域支持，解决本地打开HTML的请求拦截问题
CORS(app)

# 根路由，返回前端输入页面（用Flask托管页面时启用）
@app.route('/')
def index():
    return render_template("index.html")

@app.route('/rep_bot', methods=['GET','POST'])
def bot_rep_py():
    # 正确读取POST请求中表单字段js_input的值，未传参时默认空字符串
    user_input = request.form.get('js_input', '')
    # 传入你的业务函数获取处理结果
    outputpy = get_response(user_input)
    # 单页面无跳转场景直接返回字符串结果即可，不需要渲染模板
    return outputpy
    # 如果需要跳转到独立结果页，注释上面的return，用下面这行
    # return render_template("output.html", output=outputpy)

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

第三步：修改前端JS与HTML #

首先确保页面已经引入jQuery库（可下载jQuery文件到本地项目的static文件夹后引入），你用到的$.post是jQuery提供的方法，未引入的话会直接报方法不存在的错误。

完整的前端页面参考（存为templates/index.html，本地jQuery文件存为static/jquery.min.js）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内容处理工具</title>
    <script src="{{ url_for('static', filename='jquery.min.js') }}"></script>
</head>
<body>
    <div>
        <textarea id="inputArea" rows="6" cols="60" placeholder="请输入要处理的内容"></textarea>
        <br>
        <button id="submitBtn">提交处理</button>
    </div>
    <div style="margin-top: 20px;">
        <strong>处理结果：</strong>
        <p id="resultArea" style="white-space: pre-wrap;"></p>
    </div>

    <script>
        // 绑定提交按钮点击事件
        $("#submitBtn").click(function(){
            const inputContent = $("#inputArea").val();
            sendRequest(inputContent);
        })

        function sendRequest(input) {
            $.post("/rep_bot", {
                js_input: input
            }, function(res){
                // 把返回的结果填充到结果展示区域
                $("#resultArea").text(res);
                // 控制台打印方便调试
                console.log("处理完成，结果：", res);
            })
        }
    </script>
</body>
</html>

如果你需要单独的结果页output.html，就把文件存到templates文件夹下，内容参考：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>处理结果</title>
</head>
<body>
    <h3>处理结果：</h3>
    <p>{{ output }}</p>
    <a href="/">返回重新输入</a>
</body>
</html>

这种场景下记得把Flask路由里的返回改成render_template的形式，同时JS里的$.post要加页面跳转逻辑，新手更推荐用单页面无跳转的实现方式，逻辑更简单不容易出错。

运行说明 #

1. 先启动Flask服务，终端运行你的Python脚本
2. 打开浏览器访问http://127.0.0.1:5000即可使用，不要直接本地双击打开HTML文件，避免跨域问题
3. 确保你的get_response模块接收字符串类型入参、返回字符串类型结果，如果参数类型不匹配自行在路由函数里做转换即可

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