详解Python Flask的前后端交互

阿麦

发布时间：2026-10-15 | 7人浏览过

原创

本文通过一个具体场景，演示如何使用Flask实现前端按钮点击与后端的数据交互。内容涵盖HTML表单构建、jQuery Ajax异步请求发送、后端路由处理及JSON数据返回，并指出字符编码与数据类型配置的关键注意事项，帮助开发者快速掌握Flask基础通信流程。

场景设定：用户点击按钮后，将左侧下拉选框中的选中内容发送至后端，后端处理后将结果返回并显示在前端页面。

按钮点击前的界面状态如下：

按钮点击后的界面状态如下：

项目代码的整体结构如下所示。

采用Flask默认的项目目录规范，HTML文件存放于templates文件夹，CSS样式与JS脚本存放于static文件夹。

前端实现部分

index.html文件内容

页面包含一个简单的select下拉选框、一个提交按钮以及用于显示结果的文本区域。其中，{{ temp }}变量用于从后端接收并渲染数据。

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="static/css/style.css">
    <title>TEMP</title>
</head>
<body>
    <div class="container">
        <div class="person">
            <select id="person-one">
                <option value="新一">新一</option>
                <option value="小兰">小兰</option>
                <option value="柯南">柯南</option>
                <option value="小哀">小哀</option>
            </select>
        </div>
        <div class="transfer">
            <button class="btn" id="swap">转换</button>    
        </div>
        <p id="display">{{ temp }}</p>
    </div>
    <script src="/static/js/script.js"></script>  
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>

script.js文件内容

为按钮绑定监听事件，点击时向服务器发送请求。若请求成功，则获取返回内容并更新display元素的显示值。

注意事项

必须在HTML文件中引入<script src="https://code.jquery.com/jquery-3.6.0.min.js">，否则页面中的$符号会因未定义而报错。
dataType参数用于指定期望的数据类型，若设置为json，则前后端交互的数据格式必须均为JSON。

const person = document.getElementById('person-one');
const swap = document.getElementById('swap');
function printPerson() {
    $.ajax({
         type: "POST",
         url: "/index",
         dataType: "json",
         data:{"person": person.value},
         success: function(msg)
         {
             console.log(msg);
             $("#display").text(msg.person);//注意显示的内容
         },
         error: function (xhr, status, error) {
            console.log(error);
        }
    });
}
swap.addEventListener('click', printPerson);

后端实现部分

app.py文件内容

from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/')
@app.route("/index", methods=['GET', 'POST'])
def index():
    message = "选择的人物为："
    if request.method == 'POST':
        person = str(request.values.get("person"))
        return {'person': person}
    return render_template("index.html", temp=message)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8987, debug=True)