需要上課的人員：

題目一：

程式碼如下：

請問Server端可以收到的參數與值為何：

答案：password=yorkP （反白中）

題目二：

程式碼如下：

請問Server端收到的參數與值為何？

答案：name=John，location=Boston（反白中）

請答錯的同仁進來聽課。

資料如何由Client前端傳遞到Server後端

前端的網頁在收集使用者填寫的資料，或是程式自訂的資料，可以利用幾種方法傳送到後端，我們一一來介紹。

URL with 參數

Http傳送協定中的其中一種－－GET，這種傳送方式會在網址的後端帶上參數到Server，格式為：

URL?key1=value1&key2=value2

其中?是區隔網址與參數，而參數與參數中間利用&區隔，參數與值中間用=區隔。

form submit

form（表單）是HTML標籤中的其中一種，它會將在form裡宣告的<input … >...</input>、<select … > … </select>、<textarea … > … </textarea>這三種類型的資料送出給Server端，不過有幾點要注意的是：

<input … >...</input>、<select … > … </select>、<textarea … > … </textarea>，這些標籤必須被包含在<form> … </form>裡，並利用submit的方式送出。
<input … >...</input>、<select … > … </select>、<textarea … > … </textarea>，這些標籤必須包含一個name的屬性，原因是這個屬性的值會被當做送到Server端參數的key，所以如果沒有key的話，這個值當然也沒辦法被送出。

在初學者之間常常遇到的迷思：

<input type="hidden" id="username" name="username" value="york" />

這一段HTML語法中，id與name到底有什麼不同，最大的不同是在form submit時，吃的參數是name，form會把name拿來當參數的key值，所以沒有name，這筆參數就不會被送到後端；而id是javascript用來操控方便使用而已，並不會影響到要傳送到後端的參數。

AJAX

AJAX是比較特殊的一種資料傳送方式，因為它算是在javascript中多開一條執行緒，用來即時傳送資料到後端並處理接收的資料，其中最特別的方法是它並不會影響使用者的操作，而且接收回來的資料並不會變更整個網址與網頁，不像上述的二種方法，在接收Server端回傳的網址時，是整個網址與網頁都替換掉。

因為AJAX比較特殊，所以它的寫法也比較麻煩，下方是很正規的AJAX寫法：

可以看到這樣的AJAX寫法不好理解且不好維護，所以JQuery發展了一套簡單的AJAX寫法，替代表上述的寫法，如下：

Client前端傳送資料的設計

雖然前端有這幾種方法可以傳送資料到後端，不過簡單的分類，總共有三種傳送的方式：

GET：

網址包含參數，若參數過大會有封包大小限制的問題。

POST：

網址不帶參數，若參數過大，瀏灠器會自動進行分段傳送，所以較不會有封包大小限制的問題，不過因為參數不在網址，所以重新整理時，Server端不會收到參數。

AJAX：

瀏覽器另開執行緒執行，不影響網頁；不過傳送回來的資料不會將整個網頁重新處理。

因為有三種傳送資料的方式可以使用，那到底我們要用那一種方式來傳送資料到後端呢？通常會考慮幾種情況來決定。

安全性：

GET的資料參數會呈現在網址上，所以很容易被別人看到，如果比較有安全性的問題，不適用GET，例如帳號、密碼等。

使用者操作網頁重新整理時：

當網頁重新整理時，會以目前的網址列重新執行一次，所以POST的資料會遺失，而GET的資料因為帶在網址上，所以不會有問題；通常用在搜尋的狀態時，會以GET的方式來處理，因為目前頁數、查詢條件資料都被放在網址列，所以重新整理後會保留。

方便時與即時性：

AJAX的方便在於它不會影響使用者在網頁上的操作，而正常的form submit會在資料回傳時，將網頁整個重組；所以在要不要使用AJAX的思考時，必須考慮這筆資料的傳送是否應該讓使用者等待後再繼續？如果是，那就不應該是使用AJAX，而是應該使用form submit的方式，或是它並不是需要使用者等待的，那就可以使用AJAX；通常在使用者註冊時，檢查帳密是否重覆的確認會使用AJAX，讓使用者方便繼續填寫會員資料。

特殊狀況：Checkbox的資料傳送與接收

在HTML的資料傳輸中，通常遇到的情況是一個key配一個value，不過有一種特殊的狀況叫做checkbox。

Checkbox的特殊情況在於，每一個不同的value，都會搭配相同的key，例如下圖的範例：

可以看到所有的checkbox都是配相同的name，此時送出的封包也是一樣，如下圖：

這時候後，後端如果使用request.getParameter("vehicle")這種方式來取值的話，會只取到一個值，所以要改用request.getParameterValues("vehicle")這種方式來取，如下圖。

Server後端接收資料

當資料由前端傳送到後端時，後端即可以透過javax.servlet.http.HttpServletRequest這個物件的getParameter(String key)的方法，根據傳入的key來取得對應的value值，而這個方法是很基礎的取得參數方法，但通常使用framework的話，都會有更方便的應用，下方我們來看struts2如何幫我們取得前端傳送過來的參數。