如何将HTML表单数据通过Flask存入SQLite3数据库？

核心问题梳理 #

• 表单提交方式错误（使用GET而非POST），且action指向静态HTML而非Flask路由
• 请求参数名与后端获取的key完全不匹配
• SQL语句存在语法错误（字符串未加引号）且存在注入风险
• 路由定义重复，导致POST请求无法正确触发
• 缺少数据库表初始化逻辑

修正后的HTML代码（Phonebook.html） #

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="{{ url_for('static',filename='css/main.css') }}">
        <title>Fen</title>
    </head>
    <body>
        <section>
            <div class="form-box">
                <div class="form-value">
                    <!-- 改为POST方法，action指向Flask专用提交路由 -->
                    <form method="POST" action="/add-phone">
                        <h2>Add Phone</h2>
                        <div class="inputbox">
                            <ion-icon name="mail-outline"></ion-icon>
                            <input name="person_name" id="Name" type="text">
                            <label for="Name">Name</label>
                        </div>
                        <div class="inputbox">
                            <ion-icon name="mail-outline"></ion-icon>
                            <input name="phone_name" id="phone_name" type="text">
                            <label for="phone_name">Phone Name</label>
                        </div>
                        <div class="inputbox">
                            <ion-icon name="lock-closed-outline"></ion-icon>
                            <input name="serial_number" type="text" id="sr" required>
                            <label for="sr">serial number</label>
                        </div>   
                        <div class="inputbox">
                            <ion-icon name="lock-closed-outline"></ion-icon>
                            <input name="email" type="email" id="em" required>
                            <label for="em">E-mail</label>
                        </div>   
                        <div class="inputbox">
                            <ion-icon name="lock-closed-outline"></ion-icon>
                            <input name="phone_number" type="text" id="pn" required>
                            <label for="pn">Phone Number</label>
                        </div>
                        <button id="log" type="submit">Add Phone</button>
                    </form>
                </div>
            </div>
        </section>
        <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    </body>
</html>

HTML修改说明 #

• 表单method改为POST，避免数据暴露在URL中，匹配后端接收逻辑
• action改为Flask专用路由/add-phone，而非直接指向HTML文件
• 统一表单字段名（如person_name、phone_name），避免空格和特殊字符，方便后端获取
• 修正label的for属性，关联对应输入框ID

修正后的Flask代码 #

from flask import Flask, render_template, request, redirect, url_for
import sqlite3

app = Flask(__name__)

# 初始化数据库表（首次运行自动创建）
def init_db():
    conn = sqlite3.connect('phonebook2.db')
    cursor = conn.cursor()
    # 创建包含所需字段的表，定义字段类型
    cursor.execute('''CREATE TABLE IF NOT EXISTS phonebook2
                      (person_name TEXT, phone_name TEXT, serial_number TEXT, 
                       email TEXT, phone_number TEXT)''')
    conn.commit()
    conn.close()

# 启动前初始化数据库
init_db()

@app.route('/')
def main():
    return render_template('Phonebook.html')

# 新增专用POST路由处理表单提交
@app.route('/add-phone', methods=['POST'])
def add_phone():
    # 获取表单数据，key与HTML中name属性完全匹配
    person_name = request.form['person_name']
    phone_name = request.form['phone_name']
    serial_number = request.form['serial_number']
    email = request.form['email']
    phone_number = request.form['phone_number']

    conn = sqlite3.connect('phonebook2.db')
    cursor = conn.cursor()
    # 使用参数化查询，避免SQL注入，自动处理字符串引号问题
    cursor.execute('INSERT INTO phonebook2 VALUES (?, ?, ?, ?, ?)',
                   (person_name, phone_name, serial_number, email, phone_number))
    conn.commit()
    conn.close()

    # 提交后重定向到结果页，传递参数
    return redirect(url_for('result', 
                           person_name=person_name,
                           phone_name=phone_name,
                           serial_number=serial_number,
                           email=email,
                           phone_number=phone_number))

@app.route('/result', methods=['GET'])
def result():
    # 获取重定向传递的参数
    person_name = request.args.get('person_name')
    phone_name = request.args.get('phone_name')
    serial_number = request.args.get('serial_number')
    email = request.args.get('email')
    phone_number = request.args.get('phone_number')

    # 可选：从数据库重新查询数据（替代直接传递参数）
    # conn = sqlite3.connect('phonebook2.db')
    # cursor = conn.cursor()
    # cursor.execute('SELECT * FROM phonebook2 WHERE person_name = ?', (person_name,))
    # data = cursor.fetchone()
    # conn.close()

    return render_template('result.html',
                          person_name=person_name,
                          phone_name=phone_name,
                          serial_number=serial_number,
                          email=email,
                          phone_number=phone_number)

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

Flask代码修改说明 #

• 新增init_db()函数，首次运行自动创建数据库表，避免表不存在报错
• 移除重复根路由，新增/add-phone专用POST路由处理表单提交
• 使用参数化SQL查询（?占位符），彻底解决SQL注入风险和字符串语法错误
• 表单数据获取的key与HTML中name属性完全匹配
• 提交成功后通过redirect和url_for跳转到结果页并传递参数
• 结果页可直接接收参数，或从数据库重新查询（注释提供示例）

结果页示例（result.html） #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Result</title>
</head>
<body>
    <h2>Phone Added Successfully!</h2>
    <div>
        <p>Person Name: <span id="name">{{ person_name }}</span></p>
        <p>Phone Name: <span id="result-name">{{ phone_name }}</span></p>
        <p>Serial Number: <span id="result-surname">{{ serial_number }}</span></p>
        <p>Email: <span id="result-Email">{{ email }}</span></p>
        <p>Phone Number: <span id="result-number">{{ phone_number }}</span></p>
    </div>
</body>
</html>

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