本篇將通過示例介紹頁面參數是如何傳遞到后台的。我們繼續沿用之前搭好的程序結構，如果你不知道，請參照前兩篇。
為方便跳轉頁面，我們在首頁以及zoolist.html頁面都加上彼此地址的鏈接：
首頁：
zoolist頁：
運行tomcat看看結果：
如果頁面顯示出來是亂碼，請參照本文第二篇：springMVC與thymeleaf的整合中解決頁面亂碼的代碼。
好，我們開始頁面傳值。
這之前請將unbescape-1.1.4.RELEASE.jar文件放入WEB-INF/lib目錄下，thymeleaf解析頁面的標簽要用到，此文件在你之前下載thymeleaf-3.0.2.RELEASE-dist.zip里面。
一、修改zoolist.html頁面
給頁面添加form，text輸入框，文件代碼如下：
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>zoo list</title> 6 </head> 7 <body> 8 <a href='.'>首頁</a>->動物列表 9 <br><br> 10 <form id="iform" th:action="@{/list.html?save}" th:method="post" th:object="${animalForm}"> 11 <table border="1"> 12 <tr> 13 <th>動物名稱</th> 14 <th>數量</th> 15 <th>備注</th> 16 <th>Action</th> 17 </tr> 18 <tr> 19 <td><input type="text" name="oname" value="" th:value="*{oname}"/></td> 20 <td><input type="text" name="ocount" value="" th:value="*{ocount}"/></td> 21 <td><input type="text" name="memo" value="" th:value="*{memo}"/></td> 22 <td><input type="submit" value="添加"/></td> 23 </tr> 24 </table> 25 </form> 26 <hr> 27 <table border="1"> 28 <tr> 29 <th>序號</th> 30 <th>動物名稱</th> 31 <th>數量</th> 32 <th>備注</th> 33 </tr> 34 <tr> 35 <td>1</td> 36 <td>大馬猴</td> 37 <td>10</td> 38 <td>機靈古怪，俏皮活潑</td> 39 </tr> 40 <tr> 41 <td>2</td> 42 <td>大熊貓</td> 43 <td>80</td> 44 <td>體型笨重，喜歡吃竹子</td> 45 </tr> 46 <tr> 47 <td>3</td> 48 <td>澳洲羊駝</td> 49 <td>13</td> 50 <td>長相奇特，大國人俗稱其草泥馬</td> 51 </tr> 52 <tr> 53 <td>4</td> 54 <td>峨眉山猴</td> 55 <td>90</td> 56 <td>不怕人，有時候發賤搶游客面包吃</td> 57 </tr> 58 </table> 59 </body> 60 </html>
解釋：
我們在<html>標簽里加了個xmlns:th="http://www.thymeleaf.org"屬性，如果沒有這個聲明屬性，你的IDE可能會對th:*標簽報告沒有定義命名空間的錯誤，僅此而已，沒有它頁面照樣正常解析。
th:action屬性，其值為"@{/list.html?save}"，意思是在thymeleaf解析時會將"@{/list.html?save}"代替靜態頁面的action的值；
th:method表示其值將代替靜態頁面的method的值；
@{/list.html?save}是thymeleaf的url鏈接表達式，其通用格式為@{...}，舉個栗子，假如我們的form標簽是這樣的：<form id="iform" action='abclist.html' method="get" th:action="@{/list.html?save}" th:method="post" >，那么在我們的環境中解析后的結果會是：<form id="iform" action=“/zoo/list.html?save" method="post">。
th:object="${animalForm}"屬性，表示有一個屬性名為"animalForm"的Java bean（其屬性要有get set方法）會傳遞到頁面上來，這個名字一定和下面ZooController里的屬性名稱對應起來，一般我們會把這個bean用於表示html中form里的字段，注意form里只能放一個th:object，否則會出現編譯錯誤： org.attoparser.ParseException: (Line = 10, Column = 96) Malformed markup: Attribute "th:object" appears more than once in element。注意th:object的作用范圍，這個屬性僅在所在標簽范圍內有效，比如本例只在iform這個表單內有效，只有在這個form標簽范圍內，使用星號表達式*{fieldName}才能取得其值。
th:value="*{oname}"表示取得animalForm實例中的oname字段的值，也就是通過調用animalForm.getOname()獲得，舉個例子，假如后台傳到頁面的animalForm中的oname字段值為“大馬猴”，那么運行結果將是<td><input type="text" name="oname" value="大馬猴" /></td>。
二、在src下添加package：com.zoo.web.form，並在此包下新建類：AnimalForm.java，代碼如下：
1 package com.zoo.web.form; 2 3 public class AnimalForm { 4 5 private long id; 6 7 private String oname; 8 9 private int ocount; 10 11 private String memo; 12 13 //省略 getters setters 14 }
三、修改ZooController.java里的showZooList()方法，文件代碼：
1 package com.zoo.web.controller; 2 3 import org.springframework.stereotype.Controller; 4 import org.springframework.web.bind.annotation.RequestMapping; 5 import org.springframework.web.bind.annotation.RequestMethod; 6 import org.springframework.web.servlet.ModelAndView; 7 8 import com.zoo.web.form.AnimalForm; 9 10 @Controller 11 public class ZooController { 12 13 @RequestMapping(path = "/list", method = RequestMethod.GET) 14 public ModelAndView showZooList(){ 15 ModelAndView mav = new ModelAndView(); 16 mav.setViewName("zoolist"); 17 mav.addObject("animalForm", new AnimalForm()); 18 return mav; 19 } 20 21 }
解釋：
之前的代碼我們做了以上修改，用到了springMVC里的ModelAndView，為的是將animalForm這個bean傳遞到頁面上去；之前這個方法返回的是"zoolist"字符串，現在修改為返回一個ModelAndView類型，並把viewname設置為"zoolist"，其實它對應的就是WEB-INF/pages下的zoolist.html頁面，所有這些操作都會由springMVC框架完成，非常方便，在這里非常感謝為spring開源社區做出貢獻的每一個人。
重新啟動tomcat，進入動物列表頁面看看： 
OK！
四、在ZooController里添加一個方法來響應按鈕【添加】這個動作：
1 @RequestMapping(path = "/list", params = {"save"}, method = RequestMethod.POST) 2 public String doAdd(AnimalForm form){ 3 System.out.println("動物名：" + form.getOname()); 4 System.out.println("數量：" + form.getOcount()); 5 System.out.println("備注：" + form.getMemo()); 6 return "zoolist"; 7 }
解釋：
注意這個注解里多了一個值為"save"的params參數，它表示只對含有save這個參數的url請求起作用，如果發現客戶端傳遞來的參數里沒有“save”這個參數則不與應答，對於doAdd方法來說，http://localhost:8080/zoo/list.html?save或者http://localhost:8080/zoo/list.html?save=123或者http://localhost:8080/zoo/list.html?save&age=9等都可以響應，不過前提必須是form的method為post。
AnimalForm參數，頁面提交后form中的字段能夠傳遞到后台的秘密就在這里，粗心的你有沒有注意到AnimalForm這個bean里的字段名稱和zoolist.html頁面里form中的字段名稱一模一樣一字不差，也就是和input text框的name屬性值是一樣的。這期間你什么都沒做頁面的數據怎會填充進這個bean的呢？對了，還是偉大的spring frame work給我們做了無縫連接，無論你定義什么名稱以及什么類型的bean，只要bean里的字段名稱在頁面上也有（字段必須有get set方法），那么spring就會給你賦值進來；你也可以這樣：doAdd(AnimalForm form, AnotherAnimalForm1 form1, AnotherAnimalForm2 form2......)，只要form bean里有和頁面form對應的字段，這些bean都會被填充。
眼尖的同學已經發現了doAdd和showZooList這兩個方法響應的都是"/list"，沒錯，是這樣的，但是別忘了注解RequestMapping的參數是不一樣的，首先method的不一樣，不同的method會調用不同的方法，再就是params不一樣，你可以通過這些參數對請求做范圍限制。RequestMapping的可選元素有 consumes,headers,method,name,params,path,produces,value，詳細解釋請參照 springAPI文檔http://docs.spring.io/spring/docs/current/javadoc-api/
接下來我們重啟tomcat，瀏覽動物列表頁面，並在text框內輸入一些文字：
點擊【添加】按鈕：
唉吆威！怎么頁面form傳到后台的數據是亂碼，再看看控制台，果真：
也是亂碼，哪里缺少了設置呢，讓我喝杯絕對零度的紅茶壓壓驚！
編輯web.xml，加入這段代碼：
1 <!-- 從頁面過來的數據都轉為UTF-8 --> 2 <filter> 3 <filter-name>encodingFilter</filter-name> 4 <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> 5 <init-param> 6 <param-name>encoding</param-name> 7 <param-value>UTF-8</param-value> 8 </init-param> 9 </filter> 10 <filter-mapping> 11 <filter-name>encodingFilter</filter-name> 12 <url-pattern>/*</url-pattern> 13 </filter-mapping>
整個web.xml內容如下：
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" 3 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 4 http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> 5 <display-name>zoo</display-name> 6 <display-name>springMVC-test</display-name> 7 8 <!-- 從頁面過來的數據都轉為UTF-8 --> 9 <filter> 10 <filter-name>encodingFilter</filter-name> 11 <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> 12 <init-param> 13 <param-name>encoding</param-name> 14 <param-value>UTF-8</param-value> 15 </init-param> 16 </filter> 17 <filter-mapping> 18 <filter-name>encodingFilter</filter-name> 19 <url-pattern>/*</url-pattern> 20 </filter-mapping> 21 22 <servlet> 23 <servlet-name>springMVC</servlet-name> 24 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 25 <init-param> 26 <param-name>contextConfigLocation</param-name> 27 <param-value>classpath:com/xmlconfig/spring-mvc.xml</param-value> 28 </init-param> 29 <load-on-startup>1</load-on-startup> 30 </servlet> 31 32 <servlet-mapping> 33 <servlet-name>springMVC</servlet-name> 34 <url-pattern>*.html</url-pattern> 35 </servlet-mapping> 36 37 <welcome-file-list> 38 <welcome-file>index.html</welcome-file> 39 <welcome-file>index.htm</welcome-file> 40 <welcome-file>index.jsp</welcome-file> 41 <welcome-file>default.html</welcome-file> 42 <welcome-file>default.htm</welcome-file> 43 <welcome-file>default.jsp</welcome-file> 44 </welcome-file-list> 45 </web-app>
再次重啟小貓米，這下完美了吧！看看console：
好了，解決了！
本篇結束，下一篇將是form數據驗證。
篇末語：當你用thymeleaf模板時，在eclipse中修改了html頁面，並在瀏覽器中刷新想看看效果，卻發現頁面沒有變化，只有重啟tomcat才有反應，這個時候只需把<property name="cacheable" value="false" />屬性添加到配置文件spring-mvc.xm中的 <bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">里面即可，而不再要重啟web server啦。
有關thymeleaf語法的詳細介紹請參照thymeleaf文檔：http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
以及thymeleaf+spring文檔：http://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html
END.