Flask应用提交表单后出现Method Not Allowed错误求助

问题现象 #

提交表单更新表格时，页面返回错误：

Method Not Allowed

The method is not allowed for the requested URL.

尝试调整POST/GET方法、重构方案后仍无法解决，相关代码如下：

错误原因分析 #

1. 表单标签语法错误：前端HTML的<form>标签用逗号分隔属性（method="POST",action="/subject", href=""），不符合HTML规范，导致浏览器解析提交地址出错，实际请求的URL偏离预期，触发方法不允许的错误。
2. 模板语法错误：后端HTML模板中{% For key,value in get subjects.item()%}存在多处问题：For需小写为for，get subjects.item()是无效的变量调用，语法格式完全错误。
3. 表格结构错误：前端HTML的表格<th>标签未闭合，循环插入表格行的位置错误，导致页面渲染异常，间接影响表单提交后的页面逻辑。

修正后的代码 #

1. Python后端代码（优化逻辑，保留核心功能） #

import sqlite3    
from flask import Flask, render_template, request

app = Flask(__name__) 

# 封装数据库查询函数，避免重复代码
def get_records(table_name, id_column):
    connection = sqlite3.connect('suburb.db')
    cur = connection.cursor()
    cur.execute(f'SELECT {id_column}, Suburb FROM {table_name}')
    records = cur.fetchall()
    cur.close()
    connection.close()  # 新增关闭数据库连接，避免资源泄漏
    return records

@app.route('/')
def index():
    records = get_records('library', 'Library_id')
    return render_template('Front_End.html', records=records)

@app.route('/subject', methods=['GET', 'POST'])
def get_subject():
    if request.method == 'POST':
        subject = request.form.get('subject')
        # 用字典映射主题与对应表、ID列，简化条件判断
        table_map = {
            'Schools': ('schools', 'School_id'),
            'Libraries': ('library', 'Library_id'),
            'Parks': ('parks', 'Park_id'),
            'Hotspots': ('hotspots', 'Hotspot_id')
        }
        if subject in table_map:
            table_name, id_column = table_map[subject]
            records = get_records(table_name, id_column)
            return render_template('Front_End.html', records=records, subject=subject)
        # 主题无效时返回空数据提示
        return render_template('Front_End.html', records=[])
    else:
        # GET请求返回初始页面，默认加载图书馆数据
        records = get_records('library', 'Library_id')
        return render_template('Front_End.html', records=records)

if __name__=="__main__":
    app.run(debug=True)  # 开启debug模式，方便调试查看详细错误

2. 前端HTML模板（修正表单语法和表格结构） #

<html>
  <head>
    <title>CSS Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    /* 顶部导航栏样式 */
    .topnav {
      overflow: hidden;
      background-color: #333;
    }
    
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
    
    /* 内容区域样式 */
    .content {
      background-color: #ddd;
      padding: 10px;
      min-height: 400px; /* 修改为最小高度，避免内容溢出 */
    }
    
    /* 底部样式 */
    .footer {
      background-color: #f1f1f1;
      padding: 10px;
    }

    /* 表格样式 */
    table {
      border-collapse: collapse;
      width: 100%;
      font-family: arial;
    }
    
    th, td {
      text-align: center;
      padding: 15px;
    }
    th {
      background-color: #04AA6D;
      color: white;
    }
    
    tr:nth-child(even) {background-color: #f2f2f2;}
    tr:hover {background-color: #D3D3D3;}
    
    h1, h2 {font-family: arial;}
    </style>
  </head>
  <body>
    <div class="topnav">
      <a href="/">Home</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
    </div>

    <div class="content">
      <h2>Selected Amenities</h2>
      <p>What amenities would you like?</p>

      <!-- 修正表单属性：去掉逗号，删除无用的href属性 -->
      <form method="POST" action="/subject">
        <label for="subject">Select subject:</label>
        <select id="subject" name="subject">
          <option value="Schools">Schools</option>
          <option value="Libraries">Libraries</option>
          <option value="Parks">Parks</option>
          <option value="Hotspots">Hotspots</option>
        </select>
        <button type="submit">Filter</button>
      </form>

      <div style="overflow-x:auto; margin-top:20px;">
        <table>
          <tr>
            <th>Suburb ID</th>
            <th>Suburb</th>
          </tr> <!-- 闭合表头行 -->
          {% if records %}
            {% for record in records %}
            <tr>
              {% for value in record %}
                  <td>{{ value }}</td>
              {% endfor %}
            </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="2">No records found</td>
            </tr>
          {% endif %}
        </table>
      </div>
    </div>
  </body>
</html>

3. 后端HTML模板（修正语法错误） #

<html>
<body>
<h1>Amenities</h1>

<ul>
    <li>Schools</li>
    <li>Libraries</li>
    <li>Parks</li>
    <li>Hotspots</li>
    {% if subject %}
    <li>Selected: {{ subject }}</li>
    {% endif %}
</ul>

</body>
</html>

关键修复点说明 #

1. 表单属性修正：将<form method="POST",action="/subject", href="">改为<form method="POST" action="/subject">，删除无效的href属性，确保表单正确提交到/subject路由。
2. 数据库连接优化：新增关闭数据库连接的逻辑，避免资源泄漏；封装查询函数减少重复代码。
3. 模板语法修正：修复Jinja2模板的循环语法错误，调整表格结构确保表头和表体正确分离，添加空数据提示。
4. Debug模式开启：在app.run()中添加debug=True，方便查看详细错误信息和热重载。

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