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>
问题原因及修复方案
核心问题
- 变量传递逻辑错误:跳转
create.html时,仅将手机号传入message变量,未单独传递用于填充输入框的变量; - 字段名不匹配:
create.html中手机号输入框的name为mob_num,但后端create视图获取的是request.form['mobile_num'],前后不一致; - 输入框未绑定变量:
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
相关产品推荐
相关产品推荐

