Flask+SQLAlchemy搜索功能异常：提交后页面刷新无结果展示

我使用Python、SQLite和SQLAlchemy开发网站的搜索页面，设计了两个HTML页面：第一个页面包含下拉框和提交按钮，用户选择选项后点击提交，理应跳转至第二个页面展示搜索结果，但实际点击提交后仅刷新第一个页面，无法跳转至结果页。参考Stack Overflow上两个相似问题的解决方案后仍未解决。

导致跳转失败和功能异常的核心问题有以下几点：

• 表单提交目标错误：搜索页的表单action指向了原页面路由/SearchCash1，提交后只会刷新原页面，而非结果页
• 结果页路由不支持POST方法：原/SearchCashDisplay仅配置了GET方法，无法接收表单的POST请求
• 结果页获取表单数据逻辑错误：错误调用视图函数SearchCash1()来获取数据，正确方式是通过request对象获取提交的参数
• 模板变量名不匹配：结果页模板循环的变量名与后端传递的变量名不一致，导致数据无法渲染

app.py 修复后代码 #

# Models: 表结构定义
class Profile(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    merchant = db.Column(db.String(20), unique=False, nullable=False)
    cMerchantOther = db.Column(db.String(32), unique=False, nullable=False)
    price = db.Column(db.Float, nullable=False)
    drcr = db.Column(db.String(20), unique=False, nullable=False)
    category = db.Column(db.String(20), unique=False, nullable=False)
    pmtmethod = db.Column(db.String(20), unique=False, nullable=False)
    invoiceDate = db.Column(db.String(20), unique=False, nullable=False)

    def __repr__(self):
        return f"Category : {self.category}, Price: {self.price}"

# 搜索页面路由
@app.route('/SearchCash1', methods=["POST","GET"])
def SearchCash1():
    return render_template('SearchCash.html')

# 搜索结果展示路由（新增POST支持，修复数据获取逻辑）
@app.route('/SearchCashDisplay' , methods=["GET", "POST"])
def SearchCashDisplay():
    # 从POST请求中获取选中的商家
    if request.method == 'POST':
        selected_merchant = request.form.get('merchant')
        profileSearch = Profile.query.filter(Profile.merchant == selected_merchant).order_by(Profile.invoiceDate).all()
    else:
        # GET请求时默认返回空或所有数据，根据需求调整
        profileSearch = []
    return render_template('SearchCashDisplay.html', profileSearch=profileSearch)

# 删除功能路由
@app.route('/delete14/<int:id>')
def erase14(id):
    data = Profile.query.get(id)
    db.session.delete(data)
    db.session.commit()
    return redirect('/SearchCashDisplay')

SearchCash.html 修复后代码 #

<html>
<head>
    <title>Cash Search by Merchant</title>
    <link href="{{url_for('static', filename = 'style/style1.css')}}" rel="stylesheet">
</head>
<body>
    <h3>Search a Merchant:</h3>
    <!-- 修改form的action为结果页路由 -->
    <form action="/SearchCashDisplay" method="POST">
        <label>Select a Merchant</label>
            <select name="merchant">
             <option value="Cherokee Carpet">Cherokee Carpet</option>
             <option value="Collins Aikman">Collins Aikman</option>
             <option value="Couristan">Couristan</option>
             <option value="Masland">Masland</option>
             <option value="Mohawk Industries">Mohawk Industries</option>
             <option value="Shaw">Shaw</option>
            </select>
    <button type="submit">Submit</button>
      </form>
</body>
</html>

SearchCashDisplay.html 修复后代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Search Cash Results Page</title>
    <link href="{{url_for('static', filename = 'style/style1.css')}}" rel="stylesheet">
</head>
<body>
    <h3>View Merchant</h3>
    
    <br>
    <table>
        <thead>
            <th>ID</th>
            <th>Merchant</th>
            <th>Price</th>
            <th>drcr</th>
            <th>category</th>
            <th>Invoice Date</th>
            <th>pmtmethod</th>
            <th>cMerchantOther</th>
            <th>#</th>
        </thead>
        <!-- 修正循环变量名为后端传递的profileSearch -->
        {% for data in profileSearch %}
        <tbody>
            <td>{{data.id}}</td>
            <td>{{data.merchant}}</td>
            <td>{{data.price}}</td>
            <td>{{data.drcr}}</td>
            <td>{{data.category}}</td>
            <td>{{data.invoiceDate}}</td>
            <td>{{data.pmtmethod}}</td>
            <td>{{data.cMerchantOther}}</td>
            <td><a href="/delete14/{{data.id}}" type="button">Delete</a></td>
        </tbody>
        {% endfor%}
    </table>
</body>
</html>

内容的提问来源于stack exchange，提问作者Rocky N