Todo应用/add-todo路由提交表单触发415不支持媒体格式错误

415错误是媒体类型不支持导致的：后端通过request.get_json()期望接收JSON格式的请求体，但前端表单默认以application/x-www-form-urlencoded格式提交数据，同时输入框缺少name属性，导致数据无法正确传递。

方案一：修改后端适配表单提交（更简单） #

后端改为从表单数据中获取参数，同时给前端输入框添加name属性：

后端修改代码：

@app.route("/add-todo", methods=["GET", "POST"])
def add_todo():
  title = request.form.get("title")
  if title:  # 避免空待办事项
    db.session.add(Todo(title=title))
    db.session.commit()
  return '', 204

前端修改代码：

<form action="/add-todo" method="post" hx-boost="true">
  <input type="text" id="todo_bar" name="title"> <!-- 添加name属性 -->
  <button id="submit">Add</button>
</form>

方案二：修改前端发送JSON请求（保持后端逻辑不变） #

用HTMX的属性手动构造JSON请求体，指定正确的Content-Type：

<div>
  <input type="text" id="todo_bar">
  <button id="submit" 
          hx-post="/add-todo" 
          hx-headers='{"Content-Type": "application/json"}'
          hx-swap="none"
          hx-vals='js:{"title": document.getElementById("todo_bar").value}'>
    Add
  </button>
</div>

关键问题说明 #

1. request.get_json()要求请求的Content-Type必须是application/json，否则会直接返回415错误；
2. 原生表单默认提交格式是application/x-www-form-urlencoded，与后端期望不符；
3. 表单提交时，参数是通过输入框的name属性传递的，缺失name会导致后端无法获取值。

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