前幾天我們已經陸續學了：

• HTML：建立網頁
• CSS：美化網頁
• Servlet：讓 Java 處理請求
• JSP：負責顯示動態資料

但如果只是分開學，其實還不算真正完成一個 Web 系統。

所以今天要做一件很重要的事情：

把 HTML、Servlet 和 JSP 串在一起。

讓使用者輸入病患資料之後，可以一路傳到 Servlet，再由 JSP 把結果顯示出來。

⸻

一、先回顧昨天的流程

昨天我們知道：

Browser
↓
Servlet
↓
JSP
↓
Browser

Servlet 負責處理資料，JSP 負責顯示資料。

而今天要再多加一個：

HTML Form

所以完整流程會變成：

使用者
↓
HTML 表單
↓
Servlet
↓
處理表單資料
↓
JSP
↓
顯示結果

這就是今天的重點。

⸻

二、建立病患資料表單

首先建立：

patient.html

加入一個簡單的病患資料表單：

現在使用者可以輸入：

姓名
性別
生日
電話

然後按下：

送出資料

⸻

三、Servlet 接收資料

接著建立：

PatientServlet.java

程式碼：

package MyCode;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/patient")
public class PatientServlet extends HttpServlet {
protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("name");
String gender = request.getParameter("gender");
String birthday = request.getParameter("birthday");
String phone = request.getParameter("phone");
request.setAttribute("name", name);
request.setAttribute("gender", gender);
request.setAttribute("birthday", birthday);
request.setAttribute("phone", phone);
request.getRequestDispatcher("patient.jsp")
.forward(request, response);
}
}

這裡其實做了三件事情。

⸻

① 接收 HTML 傳過來的資料

例如：

String name = request.getParameter("name");

這代表：

從表單裡取得 name 的資料。

因為 HTML 裡面是：

所以 Servlet 才能透過：

request.getParameter("name");

取得它。

兩邊的 name 必須對得起來。

⸻

② 把資料放進 request

接下來：

request.setAttribute("name", name);

就是把剛剛取得的資料交給 JSP。

例如使用者輸入：

小明

就會變成：

name → 小明

其他資料也是一樣：

request.setAttribute("gender", gender);
request.setAttribute("birthday", birthday);
request.setAttribute("phone", phone);

⸻

四、把資料交給 JSP

最後：

request.getRequestDispatcher("patient.jsp")
.forward(request, response);

這行非常重要。

可以簡單理解成：

「Servlet，我的工作做完了，接下來請 JSP 負責把資料顯示出來。」

所以 Servlet 不需要再自己寫一大堆 HTML。

⸻

五、JSP 顯示病患資料

接下來建立：

patient.jsp

內容：

這裡看到的：

${name}

就是取得 Servlet 放進 request 裡面的資料。

⸻

六、實際跑一次看看

假設我們在表單輸入：

姓名：小明
性別：男
生日：2006-01-21
電話：0912345678

按下：

送出資料

流程會是：

patient.html
↓
使用者輸入資料
↓
PatientServlet
↓
request.getParameter()
↓
request.setAttribute()
↓
patient.jsp
↓
${name}
${gender}
${birthday}
${phone}
↓
顯示結果

最後網頁會看到：

病患資料
姓名：小明
性別：男
生日：2006-01-21
電話：0912345678

🎉

這就是我們第一次真正完成：

「表單 → Java → JSP」的資料傳遞。

⸻

七、為什麼不直接讓 HTML 顯示？

可能會有人想：

「既然 HTML 可以顯示資料，為什麼還要 Servlet 和 JSP？」

因為 HTML 本身不知道使用者剛剛輸入了什麼，也沒有辦法直接執行我們的 Java 後端邏輯。

例如未來我們要做：

使用者輸入病患編號
↓
Servlet
↓
去 MySQL 查資料
↓
找到病患
↓
JSP 顯示病患資料

HTML 只是負責提供畫面。

真正處理資料的是後端。

⸻

八、現在的系統架構

做到 Day 12，我們的系統已經比一開始完整很多。

目前架構：

┌──────────────┐
│ HTML │
│ 病患表單 │
└──────┬───────┘
↓
┌──────────────┐
│ Servlet │
│ 接收資料 │
└──────┬───────┘
↓
┌──────────────┐
│ JSP │
│ 顯示資料 │
└──────────────┘

但是現在還有一個很大的問題：

資料沒有被真正保存。

如果重新整理網頁，剛剛輸入的病患資料就不見了。

為什麼？

因為我們目前只是把資料放在：

request

裡面。

它不是資料庫。

⸻

九、下一步：MySQL

這也代表我們接下來就要進入醫療資訊系統非常重要的一部分：

資料庫。

我們需要建立一個 MySQL 資料庫，例如：

medical_system

裡面再建立：

patient

資料表。

可能會有：

欄位 用途
id 病患編號
name 姓名
gender 性別
birthday 生日
phone 電話

之後使用者新增病患：

HTML
↓
Servlet
↓
MySQL
↓
儲存成功
↓
JSP

這樣才真正開始像一個「醫療資訊系統」。

⸻

十、今天學到什麼？

今天我們把前幾天學的東西第一次串在一起。

HTML

負責：

讓使用者輸入資料。

Servlet

負責：

接收資料、處理資料。

JSP

負責：

把處理完的資料顯示出來。

整個流程可以記成：

HTML
↓
Servlet
↓
JSP

而下一階段會變成：

HTML
↓
Servlet
↓
MySQL
↓
JSP

到那時候，我們的系統就真的可以開始「儲存病患資料」了。

⸻

今日小結

今天最大的進步，是我們不再只是單獨學 HTML、Servlet 或 JSP。

而是開始把它們組合起來。

從使用者填寫一個病患表單開始，到 Java 接收資料，再到 JSP 顯示結果，整個資料流已經跑通了。

雖然現在資料還沒有存進資料庫，但這一步非常重要。

因為接下來，我們就要正式進入：

MySQL 資料庫。

讓我們的醫療資訊小系統開始真正「記住」病患資料。

Day 12 完成 ✅