You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flask应用中如何向表单文本框传递数据?

Flask表单数据回显问题

我正在开发一个简易Flask Web应用,目前能实现从表单向Flask后端传递数据,但无法将数据回显到表单文本框或跳转后的页面表单文本框里。具体场景:在首页输入手机号查询,若该手机号不存在则跳转至创建页面,此时手机号没法填充到文本框中,但数据能正常传到消息字段。我改成GET请求后问题依旧,相关代码如下:

app.py

from flask import Flask, render_template, request
from flask_sqlalchemy import SQLAlchemy
from send_mail import send_mail

app = Flask(__name__)

ENV = 'dev'

if ENV == 'dev':
    app.debug = True
    app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://postgres:Password-1@localhost/lexus'
else:
    app.debug = False
    app.config['SQLALCHEMY_DATABASE_URI'] = ''

app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)

class Feedback(db.Model):
    __tablename__ = 'feedback'
    id = db.Column(db.Integer, primary_key=True)
    mobile_num = db.Column(db.BigInteger, unique=True)
    cus_name = db.Column(db.String(200))
    aadhar = db.Column(db.BigInteger)
    cus_address = db.Column(db.Text())

    def __init__(self, mobile_num, cus_name, aadhar, cus_address):
        self.mobile_num = mobile_num
        self.cus_name = cus_name
        self.aadhar = aadhar
        self.cus_address = cus_address

with app.app_context():
    db.create_all()

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

@app.route('/submit', methods=['POST','GET'])
def submit():
    if request.method == 'POST':       
        mobile_num = request.form['mobile_num']
        cus_name = request.form['cus_name']
        aadhar = request.form['aadhar']
        cus_address = request.form['cus_address']
        cus_btn = request.form['cus_btn']
        #print(cus_btn)
        if cus_btn=='Search':
            if mobile_num == '':
                return render_template('index.html', message='Please enter required fields:')
            if db.session.query(Feedback).filter(Feedback.mobile_num == mobile_num).count() == 0:
                return render_template('create.html',message=mobile_num)
            else:
                qry_result = db.session.query(Feedback).filter(Feedback.mobile_num == mobile_num).all()
                for feedback_entry in qry_result:
                    print(feedback_entry.cus_name)
                    return render_template('index.html', mobile_num=feedback_entry.mobile_num,cus_name=feedback_entry.cus_name,aadhar=feedback_entry.aadhar,cus_address=feedback_entry.cus_address)

@app.route('/create', methods=['POST','GET'])
def create():
    if request.method == 'POST': 
        mobile_num = request.form['mobile_num']
        cus_name = request.form['cus_name']
        aadhar = request.form['aadhar']
        cus_address = request.form['cus_address']

        data = Feedback(mobile_num, cus_name, aadhar, cus_address)
        db.session.add(data)
        db.session.commit()
        #send_mail(mobile_num, cus_name, aadhar, cus_address)
        return render_template('index.html')

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

create.html

<!DOCTYPE html>
<html lang="en">
  <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/style.css" />
    <title>TRC Group</title>
  </head>
  <body>
    <div class="container">
      <img src="../static/TRC-logo.png" alt="TRC" class="logo" />
      {% if message %}
      <p class="message">{{ message | safe }}</p>
      {% endif %}
      <form action="/create" method="POST">
        <div class="form-group">
          <h3>Mobile Number</h3>
          <input
            type="tel"
            pattern="[0-9]{10}"
            name="mob_num"
            placeholder="1234567890"
          />
        </div>
        <div class="form-group">
          <h3>Name:</h3>
          <input type="text" name="cus_name" value="" />
        </div>
        <div class="form-group">
          <h3>aadhar</h3>
          <input type="text" name="aadhar" value="" pattern="[0-9]{12}"/>
        </div>
        <div class="form-group">
          <h3>cus_address</h3>
          <textarea
            name="cus_address"
            id=""
            cols="30"
            rows="3"
            placeholder="Address"
          ></textarea>
        </div>
        <input type="submit" name="cus_btn" value="Create" class="btn" />
      </form>
    </div>
  </body>
</html>

问题原因及修复方案

核心问题

  1. 变量传递逻辑错误:跳转create.html时,仅将手机号传入message变量,未单独传递用于填充输入框的变量;
  2. 字段名不匹配:create.html中手机号输入框的name为mob_num,但后端create视图获取的是request.form['mobile_num'],前后不一致;
  3. 输入框未绑定变量:create.html的手机号输入框未设置value属性接收后端传递的手机号。

具体修复步骤

1. 修改submit视图的跳转逻辑

跳转到create.html时,单独传递手机号变量:

# 原代码
return render_template('create.html',message=mobile_num)
# 修改为
return render_template('create.html', mobile_num=mobile_num)

2. 修正create.html的手机号输入框

给输入框添加value属性绑定变量,同时统一字段名:

<!-- 原代码 -->
<input
  type="tel"
  pattern="[0-9]{10}"
  name="mob_num"
  placeholder="1234567890"
/>
<!-- 修改为 -->
<input
  type="tel"
  pattern="[0-9]{10}"
  name="mobile_num"
  placeholder="1234567890"
  value="{{ mobile_num or '' }}"
/>

使用{{ mobile_num or '' }}可避免变量未定义时的渲染错误。

3. 可选:优化查询逻辑

用first()替代count()+all(),减少数据库查询次数:

# 原代码
if db.session.query(Feedback).filter(Feedback.mobile_num == mobile_num).count() == 0:
    # ...
else:
    qry_result = db.session.query(Feedback).filter(Feedback.mobile_num == mobile_num).all()
    for feedback_entry in qry_result:
        # ...
# 修改为
feedback_entry = db.session.query(Feedback).filter(Feedback.mobile_num == mobile_num).first()
if not feedback_entry:
    return render_template('create.html', mobile_num=mobile_num)
else:
    return render_template('index.html', 
                          mobile_num=feedback_entry.mobile_num,
                          cus_name=feedback_entry.cus_name,
                          aadhar=feedback_entry.aadhar,
                          cus_address=feedback_entry.cus_address)

额外注意点

  • 确保index.html中的表单字段名与后端一致,避免后续回显问题;
  • 若允许直接访问/create,可在create视图中给mobile_num设置默认值,防止模板报错。

内容的提问来源于stack exchange,提问作者Navinkumar

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.25 01:12:05