在上一篇文章，有說明如何用 useState 來管理表單輸入，並在送出後看到 console 的結果。

而在這篇文章，我們要利用 POST 方法，把表單資料送到真的後端 API，完成新增的功能。

送出表單教學－新增 Blog 範例

1. 建立物件

當使用者按下「送出」時，會先把輸入的值收集起來，放到一個物件裡：

const blog = { title, body, author };

這個 blog 物件看起來會像這樣：

{
  "title": "標題...",
  "body": "內容…",
  "author": "作者..."
}

2. 使用 fetch 發送 POST 請求

用 fetch 把這個物件傳到後端 API：

fetch('http://localhost:8000/blogs/', { 
  method: 'POST',
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(blog)
}).then(() => {
  console.log("new blog added");
});

程式碼解釋：

• fetch('http://localhost:8000/blogs/', {...})：指定要請求的 API 位址，這裡是 localhost:8000/blogs/，表示要把資料送到 /blogs/
• method: 'POST'：使用 POST方法，表示請求的目的是新增一筆資料
• headers: { "Content-Type": "application/json" }：在header中告訴伺服器，傳送資料是 JSON 格式
• body: JSON.stringify(blog)：fetch 的 body 只能是字串，所以要用 JSON.stringify 把JavaScript物件轉成JSON字串
• .then(() => { console.log("new blog is added"); })：當請求完成後，就會執行這段程式，這裡先用 console.log() 來確認請求有正常送出

完整範例程式碼

const handleSubmit = (e) => {
  e.preventDefault();
  const blog = { title, body, author };

  fetch('http://localhost:8000/blogs/', { 
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(blog)
  }).then(() => {
    console.log('new blog added');
  });
};

瀏覽器執行畫面

db.json中會多出一筆資料：

表單送出完整流程

1. 使用者填寫表單
   使用者在網頁上輸入標題、內文和作者
2. 提交表單時觸發 handleSubmit
   當使用者按下「送出」按鈕，onSubmit={handleSubmit} 會被觸發，進而執行 handleSubmit 這個函式
3. 阻止表單預設行為
   e.preventDefault()：為了避免表單自動刷新頁面。
4. 準備要送出的資料
   這裡用一個物件 blog 包含標題、內文、作者：const blog = { title, body , author};
5. 使用 fetch 發送請求
   呼叫 fetch("http://localhost:8000/blogs", {...})，並設定：

• method: "POST" → 代表是新增資料
• headers → 指定資料格式為 JSON
• body: JSON.stringify(blog) → 把物件轉成字串送出

6. 後端接收資料並存入資料庫
   伺服器收到請求，將資料存進資料庫，並回應前端
7. 前端確認請求成功
   .then(() => { console.log("new blog added"); }) 代表請求成功後，會執行這段程式