第 6 章資料輸入表單與 request 物件

第 6 章資料輸入表單與request物件 製作

request物件 • 當使用伺服器送出訊息，要求瀏覽JSP網頁時， request物件將被產生，並觸發JSP容器執行JSP 文件。對JSP網頁而言，request物件代表連線時，由客戶端送至伺服端的資料。request物件將實作javax.servlet.http.HttpServletRequest介面。

表單的建立與資料傳遞- 資料的傳遞過程 • 網頁與使用者間完整的互動過程，大致包含從客戶端取得資料，在伺服端處理資料，然後輸出資料做出回應。

輸入按下表單的建立與資料傳遞- 資料的傳遞過程 • 來操作一下將資料從客戶端傳向伺服端的實際例子。開啟ch6/PostData.htm檔，該檔的畫面如下圖所示：

表單的建立與資料傳遞- 資料的傳遞過程 • 將姓名輸入文字方塊後，按下送出按鈕，畫面將顯示Response.jsp網頁，如下圖所示：

表單的建立與資料傳遞- 資料的傳遞過程 • 整個運作的過程為使用者透過網頁中的表單，將資料傳送給Web伺服器，並呼叫Response.jsp檔。 • 此時，request物件（JSP物件）取得使用者由表單傳送過來的資料。

表單的建立與資料傳遞- 資料的傳遞過程 • 上述過程中，共有兩個重要的環節是本章的重點： • 顯示於客戶端，供使用者填寫資料的表單 • JSP網頁欲取得表單資料時，所呼叫的request物件

表單的建立與資料傳遞- 表單的建立語法 • 顯示於客戶端，供使用者輸入資料的表單，必須使用HTML語法中的<FORM>標籤建立，並完成下表三種屬性的設定。

表單的建立與資料傳遞- 表單的建立語法 • 表單的建立語法如下： <FORM action=JSP名稱路徑 method= {post | get} name= 表單名稱> 表單中的控制項 </FORM>

表單的建立與資料傳遞- 表單的建立語法 • 在表單中控制項的類型，主要有以下六種： • 指令按鈕 • 文字方塊 • 文字區控制項 • 下拉選單 • 多選鈕 • 核取方塊

表單的建立與資料傳遞- 表單的建立語法 • 下面是ch6/PostData.htm檔中供使用者輸入姓名資料的表單。 ‘摘自PostData.htm檔 012 <FORM action="Response.jsp" method=post name=FORM1> 013 <P>請輸入您的姓名: <INPUT name=tbxName> </P> 014 <INPUT name=submit1 type=submit value=送出> 015 </FORM>

表單的建立與資料傳遞- 取得客戶端傳遞的資料 • 在JSP檔中，取得客戶端所傳來資料的動作，將透過request物件的getParameter方法完成，其語法如下： request.getParameter(控制項名稱)

表單的建立與資料傳遞- 取得客戶端傳遞的資料 • 下面是 Response.jsp 檔回應ch6/PostData.htm檔時，取得表單中文字方塊（tbxName）資料的敘述。 ‘摘自PostData.htm檔 016 <%= request.getParameter("tbxName") %>

表單的建立與資料傳遞-資料傳遞的Get方式 • 欲將PostData.htm中表單資料的傳遞方式，由Post方法改成Get方法時，僅需要將表單標籤的method屬性，從Post改為Get即可。

表單的建立與資料傳遞-資料傳遞的Get方式 • Post請求的架構圖如下所示：

表單的建立與資料傳遞-資料傳遞的Get方式 • Get則會將傳遞的訊息顯示在欲瀏覽網頁網址後，架構圖如下所示：

表單的建立與資料傳遞-資料傳遞的Get方式 • 不過，不論用Post方法或者Get方法，在Response.jsp中，取得表單傳回資訊的方法　均相同： ‘摘自Response.jsp 016<%= request.getParameter("tbxName") %>

表單的建立與資料傳遞-資料傳遞的Get方式 • 從Get方法的說明中，我們得到了一個啟發，以下語法可用於開啟JSP網頁，並將資料傳遞給伺服端。 Http://網址?參數1=值1&參數2=值2&…& 　　參數N=值N

表單的建立與資料傳遞-資料傳遞的Get方式 • 因此，在GetData.htm中輸入”郭尚君“後，按下送出按鈕，相當於利用以下超連結開啟Resposne.jsp網頁。 http://localhost:8080/JspBook/ch6/Response.jsp?tbxName=郭尚君

直接透過超連結將參數送至Response.jsp檔 按下表單的建立與資料傳遞-資料傳遞的Get方式 • 在ch6\GetData2.htm檔中，就示範了以這個方式開啟網頁，並傳遞資料給Response.jsp檔的做法：

表單的建立與資料傳遞- 資料的轉換 • 當利用request物件，取得從表單中傳遞過來的資料時，不論使用者在表單輸入的數字還是文字，所取得資料之型別均為String。 • JSP網頁需要處理數值運算時，必須將字串轉換成數值。在進行轉換時，將利用某型別之類別方法進行轉換，語法如下：型別類別.parseXXX(String 字串)

表單的建立與資料傳遞- 資料的轉換 • 上述方法的回傳值，即為完成轉換後的數值。　下面是語法各部份的說明： • 型別類別型別類別為Java中，用於處理某資料型別的類別 • parseXXX 所有處理資料型別的類別中，用於將字串轉換為數值　的類別方法，其名稱均為parseXXX • 字串欲轉換為數值的字串

表單的建立與資料傳遞- 資料的轉換 • 下表為各型別類別以及用於轉換字串的方法：

表單的建立與資料傳遞- 資料的轉換(將字串轉換為數值) • 將字串true或false，轉換為boolean值時，則必須利用Boolean類別的valueOf方法，該方法為類別方法，其語法如下： Boolean.valueOf(String 字串) • 下面是語法各部份的說明： • 字串欲轉換為boolean值的字串，若該字串為”true”，則　　valueOf方法將傳回true。若不是”true”，則傳回 false

表單的建立與資料傳遞- 資料的轉換 • 除了可將字串轉換為數值外，亦可將數值轉換為字串。 • 轉換的方式是運用String類別的valueOf方法，其語法如下： String.valueOf(數值) • 回傳值為轉換後的字串。下面是語法各部份的說明： • 數值 - 欲轉換為字串的數值

文字方塊中的資料被清空 按下控制項的建立與訊息傳遞- 指令按鈕 • 在表單中，須要使用的指令按鈕有Submit按鈕（送出）與Reset按鈕（重設）兩種，後者用於清除表單中已輸入的資料，供使用者再次輸入。

控制項的建立與訊息傳遞- 指令按鈕 • 建立指令按鈕時，需使用HTML語法的<Input>標籤，且需要設定下表的幾個屬性：其語法如下： <Input Type = {submit | reset} Name=按鈕名稱 Value=顯示值>

<INPUT name=submit1 type=submit value="送出"> <INPUT name=reset1 type=reset value="清除"> 控制項的建立與訊息傳遞- 指令按鈕 • 下面是兩種按鈕的建立示範。

控制項的建立與訊息傳遞- 文字方塊與密碼輸入欄 • 文字方塊與密碼欄的HTML語法如下： <Inupt Type = {text | password} Name=文字方塊名稱 Value=傳出值> • 各屬性的意義如下表：

控制項的建立與訊息傳遞- 文字方塊與密碼輸入欄 • 以下為文字方塊的建立示範：請輸入姓名:<INPUT type=text name= tbxName> 結果如下圖

控制項的建立與訊息傳遞- 文字方塊與密碼輸入欄 • 下面是一個密碼輸入欄的建立示範：　密碼:<INPUT type=password name=pbxPassword> 結果如下圖

控制項的建立與訊息傳遞- 文字區控制項 • 文字區控制項的HTML語法如下： <TEXTAREA rows=列數cols=行數name =控制項名稱> 預設輸入值 </TEXTAREA>

控制項的建立與訊息傳遞- 文字區控制項 • 下表為語法中各部份的說明：

控制項的建立與訊息傳遞- 文字區控制項 • 以下為文字區控制項的建立示範： <TEXTAREA rows=5 cols=30 name= txtaMsg></TEXTAREA> 完成建立的文字區如下：

控制項的建立與訊息傳遞- 下拉清單方塊 • 建立下拉清單方塊控制項的HTML語法如下： <SELECT name=控制項名稱 size=1> <OPTION value=傳出值1 selected>選項1 </OPTI ON> <OPTION value=傳出值2>選項2</OPTION> …… <OPTION value=傳出值N>選項N</OPTION> </SELECT>

控制項的建立與訊息傳遞- 下拉清單方塊 • 語法中各部份的說明，請參考下表：

控制項的建立與訊息傳遞- 下拉清單方塊 • 下面是一個下拉清單方塊的建立示範： <SELECT name=slbJob size=1> <OPTION selected>學生</OPTION> <OPTION>公務員</OPTION> <OPTION>程式設計師</OPTION> <OPTION>SOHO族</OPTION> </SELECT>

控制項的建立與訊息傳遞- 下拉清單方塊 • 完成建立的下拉清單方塊如下圖：

控制項的建立與訊息傳遞- 清單方塊 • 清單方塊與下拉清單方塊一樣，是由<SELECT>標籤與<OPTION>標籤所組成。 • 不同的地方：設定<SELECT>標籤的size屬性，其值不可設為1，如此便可建立出清單方塊。

控制項的建立與訊息傳遞- 清單方塊 • 以下為建立清單方塊的HTML語法： <SELECT name=控制項名稱 size=控制項大小　　Multiple> <OPTION value=傳出值1 selected>選項1</OPTION> <OPTION value=傳出值2>選項2</OPTION> …… <OPTION value=傳出值N>選項N</OPTION> </SELECT>

控制項的建立與訊息傳遞- 清單方塊 • 語法中各部份的說明，請參考下表：

控制項的建立與訊息傳遞- 清單方塊 • 單選型的清單方塊 – 下面是一個清單方塊的建立示範： <SELECT name=lbxBook size=5> <OPTION value = “A9073” selected>Access 2000 徹底研究</OPTION> <OPTION value = “A9193” >Access 2000 程式　設計</OPTION> <OPTION value = “A0053” >Access 2000 網路應用 </OPTION> <OPTION value = “P9067” >Visual C++ 入門進階 </OPTION> <OPTION value = “P9127” >精通視窗程式設計 </OPTION> </SELECT>

控制項的建立與訊息傳遞- 清單方塊 • 完成建立的清單方塊如下圖所示，使用者僅能在清單方塊中，選取一個選項：

控制項的建立與訊息傳遞- 清單方塊 • 在回應的JSP網頁中，取得單選型清單方塊所傳出的值。若傳出的是字串，則必須利用if…else if敘述，配合String物件的equals方法，判斷傳出值。

控制項的建立與訊息傳遞- 清單方塊 • 以上述語法所建立的清單方塊為例，取得該清單方塊傳出值的JSP網頁中，可以利用下列敘述判斷傳出值： String selVal = request.getParameter("lbxBook"); //取得lbxBook清單方塊的傳出值 //利用if敘述比對selVal的值, selVal為從表單中取得值 if (selVal.equals("A9073")) out.println("Access 2003徹底研究");

控制項的建立與訊息傳遞- 清單方塊 else if (selVal.equals("A9193")) out.println("Access 2003 程式設計"); else if (selVal.equals("A0053")) out.println("Access 2003 網路應用"); else if (selVal.equals("P3237")) out.println("Visual C++ .NET 入門進階"); else if (selVal.equals("P3207")) out.println("精通視窗程式設計");

控制項的建立與訊息傳遞- 清單方塊 • 若傳出值為字元或者數值時，則可利用switch判斷敘述執行比對。當為數值則必須在取得清單方塊值時，將字串轉換為數值： //取得lbxBook清單方塊的傳出值, 並利用 Integer.parseInt轉換為整數 int selVal = Integer.parseInt (request.getParameter("lbxBook")); //利用switch敘述比對selVal的值 switch(selVal){

控制項的建立與訊息傳遞- 清單方塊 case 9073 : out.println("Access 2003徹底研究"); break; case 9193 : out.println("Access 2003 程式設計"); break; case 53 : out.println("Access 2003 網路應用"); break;

控制項的建立與訊息傳遞- 清單方塊 case 3237 : out.println("Visual C++ .NET 入門進階"); break; case 3207 : out.println("精通視窗程式設計"); break; }

控制項的建立與訊息傳遞- 清單方塊 • 多選型的清單方塊– 下面HTML敘述，將建立一個可多重選取選項的清單方塊。 <SELECT name=lbxBook size=5 Multiple> <OPTION value = "A9073" selected>Access 2000徹底研究</OPTION> <OPTION value = “A9193” >Access 2000 程式設計</OPTION> <OPTION value = "A0053" selected >Access 2000 網路應用</OPTION> <OPTION value = “P9067” >Visual C++ 入門進階 </OPTION> <OPTION value = “P9127” >精通視窗程式設計 </OPTION> </SELECT>

第 6 章資料輸入表單與 request 物件