在Flask应用中处理表单数据的技术实践

范靓好Udolf

于 2025-06-16 09:06:25 发布

阅读量750

点赞数 19

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00262/article/details/148682364

在Flask应用中处理表单数据的技术实践

dealing_with_data Material that I use for a variety of classes and tutorials 项目地址: https://gitcode.com/gh_mirrors/de/dealing_with_data

前言

在现代Web开发中，表单是与用户交互的重要方式之一。本文将深入探讨如何在Flask框架中有效地处理HTML表单数据，并结合实际项目展示如何构建一个完整的表单处理流程。

表单基础概念

HTML表单是Web应用中收集用户输入的主要方式。一个典型的表单包含以下几个关键元素：

表单标签：定义表单的开始和结束
输入字段：如文本框、复选框等
提交按钮：用于发送表单数据

在Flask应用中处理表单数据通常涉及以下步骤：

创建HTML表单页面
设置表单的action属性指向处理URL
在Flask路由中接收并处理表单数据

项目中的表单实现

搜索表单实现

项目中实现了一个搜索自行车站点的功能，核心代码如下：

<form action="/list_stations">
  Station Name:
  <input type="text" name="station_name">
  <input class="btn btn-primary btn-sm" type="submit" value="Submit">
</form>

这个表单的关键点在于：

action="/list_stations" 指定了表单提交的目标URL
name="station_name" 定义了参数的名称
提交按钮触发表单数据的发送

表单数据处理

在Flask后端，我们通过request.args获取表单数据：

@app.route('/citibike_api')
def citibike_stations():
    search_query = request.args.get('station_name')
    
    if search_query is None:
        sql = "SELECT DISTINCT id, name, capacity, lat, lon FROM status_fall2017"
    else:
        sql = '''SELECT DISTINCT id, name, capacity, lat, lon
                FROM status_fall2017
                WHERE name LIKE :station_name_query
              '''
    
    with engine.connect() as connection:
        params={"station_name_query": f"%{search_query}%"}
        results = connection.execute(text(sql), params)
        stations = results.mappings().all()
        list_of_stations = [dict(row) for row in stations]

    api_results = {"stations": list_of_stations}
    return jsonify(api_results)

这段代码展示了如何：

使用request.args.get()获取表单参数
根据参数构建不同的SQL查询
使用参数化查询防止SQL注入
将结果转换为JSON格式返回

高级表单处理技巧

动态内容生成

项目中还展示了如何根据表单参数动态生成内容：

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const station_name_param = urlParams.get('station_name');

api_call_params = new URLSearchParams();
if (station_name_param) {
    api_call_params= new URLSearchParams({
        station_name: station_name_param,
    })
};

这段JavaScript代码在前端解析URL参数，为后续API调用做准备。

数据可视化

项目中将表单数据与数据可视化结合，在地图上显示搜索结果：

@app.route('/station_map', methods=['GET'])
def station_map():
    search_query = request.args.get('station_name')
    
    fig, ax = plt.subplots()
    base = df_nyc.plot(
        linewidth=0.5,
        color='White',
        edgecolor='Black',
        figsize=(8, 8),
        alpha=0.5,
        ax = ax
    )
    
    if search_query is None:
        sql = "SELECT DISTINCT id, name, capacity, lat, lon FROM status_fall2017"
    else:
        sql = '''SELECT DISTINCT id, name, capacity, lat, lon
                FROM status_fall2017
                WHERE name LIKE :station_name_query
              '''
    
    with engine.connect() as connection:
        params={"station_name_query": f"%{search_query}%"}
        results = connection.execute(text(sql), params)
        stations = [dict(row) for row in results.mappings().all()]
    
    ax = pd.DataFrame(stations).plot(kind='scatter', x='lon', y='lat', s=2, ax=base)
    buf = BytesIO()
    fig.savefig(buf, format="png")
    data = base64.b64encode(buf.getbuffer()).decode("ascii")
    
    results = {"image": data}
    return jsonify(results)