數據綁定和表單標簽
數據綁定
數據綁定是將用戶輸入綁定到領域模型的一種特性，在Spring MVC的controller和view數據傳遞中，基于HTTP請求的特性，所有HTTP請求參數的類型均為字符串，如果模型領域需要綁定的類型為double或int，則需要手動進行類型轉換，而有了數據綁定后，就不需要手動將HTTP請求中的String類型轉換為模型需要的類型了，數據綁定的另一個好處是，當輸入驗證失敗時，會重新生成一個HTML表單，無需重新填寫輸入字段。
表單標簽庫
表單標簽庫中包含了可以用在JSP頁面中渲染HTML元素的標簽。為了使用這些標簽，必須在JSP頁面開頭處聲明taglib指令。
|
1
|
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> |
表單標簽庫中有input、password、hidden、textarea、checkbox、checkboxes、radiobutton、radiobuttons、select、option、options、errors。表單標簽有acceptCharset、commandName、cssClass、cssStyle、htmlEscape、modelAttribute等屬性。
1.input標簽：input標簽渲染<input type="text"/>元素，這個標簽最重要的是path屬性，該字段將輸入綁定到form backing object的一個屬性。如下所示，這個input標簽被綁定到了user對象的userName屬性上
|
1
2
3
4
5
6
7
8
|
<form:form modelAttribute="user" method="post" action="userSave"> <fieldset> <p> <label for="name">用戶名:</label> <form:input path="userName"/> </p> </fieldset></form:form> |
2.password標簽：渲染<input type="password"/>元素，password標簽與input標簽相似，只不過它有一個showPassword屬性。
3.textare標簽：渲染一個HTML的textarea元素。textarea基本上就是支持多行輸入的input元素。
4.checkbox標簽：渲染<input type="checkbox"/>元素，同樣是通過path屬性實現數據綁定，同時checkboxes渲染多個checkbox元素。
5.radiobutton標簽渲染<input type="radio"/>元素，radiobuttons渲染多個radio元素。
6.select標簽：渲染一個HTML的select元素，被渲染元素的選項可能來自賦予其items屬性的Collection、Map、Array，或者來自一個嵌套的option或options標簽。
數據綁定范例
如上分別介紹了數據綁定的定義和優勢，以及一些表單標簽，為了讓大家能進一步了解上面的內容，范例中實現了用戶類屬性和JSP中表單的綁定，同時在JSP中分別展示了input、password、textarea、checkbox、select標簽。
我們首先看一下User類，類中包含User的屬性，以及對屬性字段的get和set方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
public class User { private String userName; //用戶名 private String password; //密碼 private Integer sex; //性別 private boolean marriage; //是否結婚 private ArrayList<String> hobby; //興趣愛好 private ArrayList<String> contacts;//人脈 private String carrer; //職業 private String houseRegister; //戶籍 private String remark; //個人描述 public String getRemark() { return remark; } public void setRemark(String remark) { this.remark = remark; } public String getHouseRegister() { return houseRegister; } public void setHouseRegister(String houseRegister) { this.houseRegister = houseRegister; } public String getCarrer() { return carrer; } public void setCarrer(String carrer) { this.carrer = carrer; } public String getUserName() { return userName; } public void setUserName(String userName) { this.userName = userName; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public Integer getSex() { return sex; } public void setSex(Integer sex) { this.sex = sex; } public boolean isMarriage() { return marriage; } public void setMarriage(boolean marriage) { this.marriage = marriage; } public ArrayList<String> getHobby() { return hobby; } public void setHobby(ArrayList<String> hobby) { this.hobby = hobby; } public ArrayList<String> getContacts() { return contacts; } public void setContacts(ArrayList<String> contacts) { this.contacts = contacts; }} |
我們的Controller類中定義映射請求的方法，其中包括處理userInput請求的inputUser方法，以及userSave請求的addUser方法，其中在addUser方法中用到了重定向。其中通過@Autowired注釋在ProductController對象中主動注入UserService對象，實現對user對象的保存和查詢等操作；通過model的addAttribute方法將User類對象、HashMap類型的hobbys對象、String[]類型的carrers對象傳遞給View（JSP），代碼如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
@Controllerpublic class ProductController { private static final Log logger = LogFactory.getLog(ProductController.class); @Autowired private UserService userService; @RequestMapping(value="/userInput") public String inputUser(Model model){ HashMap<Integer, String> hobbys = new HashMap<Integer, String>(); hobbys.put(1, "籃球"); hobbys.put(2, "羽毛球"); hobbys.put(3, "臺球"); hobbys.put(4, "游泳"); model.addAttribute("user", new User()); model.addAttribute("hobbys", hobbys); model.addAttribute("carrers",new String[]{"教師","學生","醫生","IT民工","其它"}); return "UserAdd"; } @RequestMapping(value="/userSave") public String addUser(@ModelAttribute User user){ userService.addUser(user); return "redirect:/userList"; } @RequestMapping(value="/userList") public String listUsers(Model model){ List<User> users = userService.getUsers(); model.addAttribute("users", users); return "UserList"; }} |
同時，為了避免中文亂碼的問題，需要在web.xml文件中增加編碼過濾器，同時JSP頁面編碼設置為UTF-8，form表單的提交方式必須為post，我們先看web.xml文件的配置信息：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/config/springmvc-config.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!-- 避免中文亂碼 --> <filter> <filter-name>characterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>characterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app> |
UserAddJSP文件格式如下，其中將Map類型的hobbys綁定到了checkboxes上，將String[]類型的carrer綁定到了select上，實現了通過option標簽對select添加選項，同時method方法需指定為post來避免中文亂碼的問題。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Add a User</title></head><body><div id="global"><form:form modelAttribute="user" method="post" action="userSave"> <fieldset> <legend>Add a User</legend> <p> <label>用戶名:</label> <form:input path="userName"/> </p> <p> <label>密碼:</label> <form:password path="password"/> </p> <p> <label>婚姻:</label> <form:checkbox path="marriage" value="已婚"/> </p> <p> <label>愛好:</label> <form:checkboxes items="${hobbys}" path="hobby"/> </p> <p> <label>人脈:</label> <form:checkbox path="contacts" value="張三"/>張三 <form:checkbox path="contacts" value="李四"/>李四 <form:checkbox path="contacts" value="王五"/>王五 <form:checkbox path="contacts" value="趙六"/>趙六 </p> <p> <label>職業:</label> <form:select path="carrer"> <option/>請選擇職業 <form:options items="${carrers }"/> </form:select> </p> <p> <label>戶籍:</label> <form:select path="houseRegister"> <option>請選擇戶籍</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3">廣州</option> <option value="4">深圳</option> <option value="5">其它</option> </form:select> </p> <p> <label>個人描述:</label> <form:textarea path="remark" rows="5"/> </p> <p id="buttons"> <input id="reset" type="reset"> <input id="submit" type="submit" value="Add User"> </p> </fieldset></form:form></div></body></html> |
UserList.JSP文件實現對保存的user信息的遍歷展示。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title></head><body><div id="global"> <h1>User List</h1> <a href="<c:url value="/userInput"/>">Add User</a> <table> <tr> <th>用戶名</th> <th>密碼</th> <th>性別</th> <th>婚姻</th> <th>興趣愛好</th> <th>人脈</th> <th>職業</th> <th>戶籍</th> <th>個人描述</th> </tr> <c:forEach items="${users }" var="user"> <tr> <td>${user.userName }</td> <td>${user.password }</td> <td>${user.sex }</td> <td>${user.marriage }</td> <td>${user.hobby }</td> <td>${user.contacts }</td> <td>${user.carrer }</td> <td>${user.houseRegister }</td> <td>${user.remark }</td> </tr> </c:forEach> </table></div></body></html> |
因為該工程是在上一篇工程中增加的，因此其他的配置文件與上一篇工程中相同，這里不再做過多的贅述，希望讀者見諒。
運行該程序在瀏覽器中輸入http://localhost:8081/SpringMVC/userInput可以看到左圖，填寫表單完成，點擊Add User按鈕，即可看到右圖的輸出信息，不知道讀者是否發現輸出信息中存在問題，興趣愛好為[1]，戶籍也為1，輸出的為表單中選擇的索引位置，還有好像保單中忘了指定User的性別了，導致輸入性別列為空。這些問題是由于本文的疏忽造成的，有興趣的讀者可以對這篇博客做更加完善的改正。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：http://www.cnblogs.com/zhanglei93/p/6273655.html
