如何用type="button"按钮实现表单提交至Python Flask后端

这里提供两种常用实现方式，按需选择：

方式1：同步提交（页面刷新） #

这种方式模拟原生表单提交的行为，点击按钮后页面会跳转到后端路由返回的内容。

前端代码 #

<!-- 表单要设置id、提交方法和后端路由 -->
<form id="userForm" method="POST" action="/handle-form">
  <input type="text" name="username" placeholder="输入用户名" required>
  <input type="password" name="password" placeholder="输入密码" required>
  <!-- 普通按钮，绑定点击事件 -->
  <button type="button" id="submitBtn">提交</button>
</form>

<script>
// 获取按钮和表单元素
const submitBtn = document.getElementById('submitBtn');
const userForm = document.getElementById('userForm');

// 给按钮添加点击事件监听
submitBtn.addEventListener('click', () => {
  // 触发表单的原生提交方法
  userForm.submit();
});
</script>

Flask后端代码 #

from flask import Flask, request, render_template

app = Flask(__name__)

# 渲染前端页面
@app.route('/')
def index():
    return render_template('index.html')  # 前端HTML放在templates目录下

# 处理表单提交
@app.route('/handle-form', methods=['POST'])
def handle_form():
    # 通过request.form获取表单字段
    username = request.form.get('username')
    password = request.form.get('password')
    
    # 这里写你的业务逻辑，比如验证、存数据库
    print(f"收到用户提交：{username} / {password}")
    
    # 返回响应，可以是跳转、提示文本或HTML页面
    return f"提交成功！欢迎你，{username}!"

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

方式2：异步提交（页面不刷新） #

如果需要提交后留在当前页面（比如做弹窗提示、局部更新），用AJAX方式提交，这里用原生Fetch API实现：

前端JS修改部分 #

const submitBtn = document.getElementById('submitBtn');
const userForm = document.getElementById('userForm');

submitBtn.addEventListener('click', async () => {
  // 用FormData自动收集表单所有数据
  const formData = new FormData(userForm);
  
  try {
    // 发送POST请求到后端
    const response = await fetch('/handle-form', {
      method: 'POST',
      body: formData
    });
    
    if (response.ok) {
      const result = await response.text();
      // 处理成功结果，比如弹窗提示
      alert(result);
      // 可选：清空表单
      userForm.reset();
    } else {
      alert('提交失败，请检查输入后重试');
    }
  } catch (err) {
    console.error('请求出错:', err);
    alert('网络异常，无法提交');
  }
});

注意事项 #

• 表单的action属性要和Flask后端的路由地址完全匹配
• 如果需要上传文件，记得给表单加上enctype="multipart/form-data"属性，FormData会自动处理文件数据
• 表单的required属性在两种方式下都会生效，点击按钮时会自动验证必填项

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