Flask开发中如何防止表单输入数据显示在URL地址栏

表单提交后输入内容显示在URL中，是表单默认走GET提交方式导致的，你的代码存在两个直接触发问题的错误：

• 存在嵌套form标签：代码最外层写了一个无任何属性配置的<form>起始标签，HTML标准不支持表单嵌套，浏览器渲染时会直接忽略内层配置了method="POST"的表单，使用外层无配置的表单提交，而表单未显式指定method时默认就是GET请求，所有参数会被拼接在URL后展示。
• 内层表单属性写法有误：action属性值写的是PHP后端路径/action_page.php，和你使用的Flask框架路由不匹配，且action属性后多写了一个多余的逗号，不符合HTML语法规范。

1. 修正前端HTML代码 #

• 删除最外层多余的空<form>标签，只保留一层表单标签
• 修改action属性值为Flask后端实际处理表单提交的路由地址，删除属性间多余的逗号
  修正后的表单核心结构参考：

<div class="row">
    <div class="col-75">
      <div class="container">
        <!-- 已移除外层多余form，修正action路径、移除多余逗号 -->
        <form action="/submit_form" method="POST">
          <div class="row">
            <div class="col-50">
              <h3>Billing Address</h3>
              <!-- 后续所有输入框、按钮的原有代码保持不变即可 -->

你贴的CSS样式代码没有逻辑问题，不需要修改。

2. 配置Flask后端接收逻辑 #

处理表单的路由需要显式声明允许POST方法，通过request.form获取提交的参数，示例代码：

from flask import Flask, request, render_template

app = Flask(__name__)

# 渲染表单页面的路由
@app.route('/checkout')
def checkout_page():
    return render_template('checkout.html') # 替换成你实际的表单模板文件名

# 处理表单提交的路由，路径必须和前端form的action值完全一致，methods包含POST
@app.route('/submit_form', methods=['POST'])
def process_submit():
    # 从POST请求体中读取表单参数，参数不会出现在URL中
    user_data = {
        "firstname": request.form.get("firstname"),
        "email": request.form.get("email"),
        "address": request.form.get("address"),
        "city": request.form.get("city"),
        "state": request.form.get("state"),
        "postcode": request.form.get("postcode"),
        "cardname": request.form.get("cardname"),
        "cardnumber": request.form.get("cardnumber"),
        "expmonth": request.form.get("expmonth"),
        "expyear": request.form.get("expyear"),
        "cvv": request.form.get("cvv"),
        "same_addr": request.form.get("sameadr")
    }
    # 此处编写你的数据存储、后续业务逻辑
    return "提交成功"

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

注意：你的表单涉及信用卡号、CVV等敏感支付信息，正式环境部署必须启用HTTPS加密传输，同时严格遵守支付卡行业数据安全规范，禁止明文存储敏感支付信息。

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