快捷導(dǎo)航

Spring MVC---數(shù)據(jù)綁定和表單標(biāo)簽詳解

更新時(shí)間：2017年01月12日 14:46:29 作者：best.lei

本篇文章主要介紹了Spring MVC---數(shù)據(jù)綁定和表單標(biāo)簽詳解，具有一定的參考價(jià)值，有興趣的可以了解一下。

數(shù)據(jù)綁定和表單標(biāo)簽

數(shù)據(jù)綁定

數(shù)據(jù)綁定是將用戶輸入綁定到領(lǐng)域模型的一種特性，在Spring MVC的controller和view數(shù)據(jù)傳遞中，基于HTTP請(qǐng)求的特性，所有HTTP請(qǐng)求參數(shù)的類型均為字符串，如果模型領(lǐng)域需要綁定的類型為double或int，則需要手動(dòng)進(jìn)行類型轉(zhuǎn)換，而有了數(shù)據(jù)綁定后，就不需要手動(dòng)將HTTP請(qǐng)求中的String類型轉(zhuǎn)換為模型需要的類型了，數(shù)據(jù)綁定的另一個(gè)好處是，當(dāng)輸入驗(yàn)證失敗時(shí)，會(huì)重新生成一個(gè)HTML表單，無需重新填寫輸入字段。

表單標(biāo)簽庫

表單標(biāo)簽庫中包含了可以用在JSP頁面中渲染HTML元素的標(biāo)簽。為了使用這些標(biāo)簽，必須在JSP頁面開頭處聲明taglib指令。

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

表單標(biāo)簽庫中有input、password、hidden、textarea、checkbox、checkboxes、radiobutton、radiobuttons、select、option、options、errors。表單標(biāo)簽有acceptCharset、commandName、cssClass、cssStyle、htmlEscape、modelAttribute等屬性。

1.input標(biāo)簽：input標(biāo)簽渲染<input type="text"/>元素，這個(gè)標(biāo)簽最重要的是path屬性，該字段將輸入綁定到form backing object的一個(gè)屬性。如下所示，這個(gè)input標(biāo)簽被綁定到了user對(duì)象的userName屬性上

<form:form modelAttribute="user" method="post" action="userSave">
  <fieldset>
    <p>
      <label for="name">用戶名:</label>
      <form:input path="userName"/>
    </p>
  </fieldset>
</form:form>

2.password標(biāo)簽：渲染<input type="password"/>元素，password標(biāo)簽與input標(biāo)簽相似，只不過它有一個(gè)showPassword屬性。

3.textare標(biāo)簽：渲染一個(gè)HTML的textarea元素。textarea基本上就是支持多行輸入的input元素。

4.checkbox標(biāo)簽：渲染<input type="checkbox"/>元素，同樣是通過path屬性實(shí)現(xiàn)數(shù)據(jù)綁定，同時(shí)checkboxes渲染多個(gè)checkbox元素。

5.radiobutton標(biāo)簽渲染<input type="radio"/>元素，radiobuttons渲染多個(gè)radio元素。

6.select標(biāo)簽：渲染一個(gè)HTML的select元素，被渲染元素的選項(xiàng)可能來自賦予其items屬性的Collection、Map、Array，或者來自一個(gè)嵌套的option或options標(biāo)簽。

數(shù)據(jù)綁定范例

如上分別介紹了數(shù)據(jù)綁定的定義和優(yōu)勢(shì)，以及一些表單標(biāo)簽，為了讓大家能進(jìn)一步了解上面的內(nèi)容，范例中實(shí)現(xiàn)了用戶類屬性和JSP中表單的綁定，同時(shí)在JSP中分別展示了input、password、textarea、checkbox、select標(biāo)簽。

我們首先看一下User類，類中包含User的屬性，以及對(duì)屬性字段的get和set方法：

public class User {
  private String userName; //用戶名
  private String password; //密碼
  private Integer sex;   //性別
  private boolean marriage; //是否結(jié)婚
  private ArrayList<String> hobby;    //興趣愛好
  private ArrayList<String> contacts;//人脈
  private String carrer;  //職業(yè)
  private String houseRegister;  //戶籍
  private String remark;  //個(gè)人描述
  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類中定義映射請(qǐng)求的方法，其中包括處理userInput請(qǐng)求的inputUser方法，以及userSave請(qǐng)求的addUser方法，其中在addUser方法中用到了重定向。其中通過@Autowired注釋在ProductController對(duì)象中主動(dòng)注入U(xiǎn)serService對(duì)象，實(shí)現(xiàn)對(duì)user對(duì)象的保存和查詢等操作；通過model的addAttribute方法將User類對(duì)象、HashMap類型的hobbys對(duì)象、String[]類型的carrers對(duì)象傳遞給View（JSP），代碼如下:

@Controller
public 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, "臺(tái)球");
    hobbys.put(4, "游泳");
    model.addAttribute("user", new User());
    model.addAttribute("hobbys", hobbys);
    model.addAttribute("carrers",new String[]{"教師","學(xué)生","醫(yī)生","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";
  }
}

同時(shí)，為了避免中文亂碼的問題，需要在web.xml文件中增加編碼過濾器，同時(shí)JSP頁面編碼設(shè)置為UTF-8，form表單的提交方式必須為post，我們先看web.xml文件的配置信息：

<?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上，實(shí)現(xiàn)了通過option標(biāo)簽對(duì)select添加選項(xiàng)，同時(shí)method方法需指定為post來避免中文亂碼的問題。

<%@ 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>職業(yè):</label>
      <form:select path="carrer"> 
        <option/>請(qǐng)選擇職業(yè)
        <form:options items="${carrers }"/>
      </form:select>
    </p>
    <p>
      <label>戶籍:</label>
      <form:select path="houseRegister">
        <option>請(qǐng)選擇戶籍</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>個(gè)人描述:</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文件實(shí)現(xiàn)對(duì)保存的user信息的遍歷展示。

<%@ 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>職業(yè)</th>
      <th>戶籍</th>
      <th>個(gè)人描述</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>

因?yàn)樵摴こ淌窃谏弦黄こ讨性黾拥模虼似渌呐渲梦募c上一篇工程中相同，這里不再做過多的贅述，希望讀者見諒。

運(yùn)行該程序在瀏覽器中輸入http://localhost:8081/SpringMVC/userInput可以看到左圖，填寫表單完成，點(diǎn)擊Add User按鈕，即可看到右圖的輸出信息，不知道讀者是否發(fā)現(xiàn)輸出信息中存在問題，興趣愛好為[1]，戶籍也為1，輸出的為表單中選擇的索引位置，還有好像保單中忘了指定User的性別了，導(dǎo)致輸入性別列為空。這些問題是由于本文的疏忽造成的，有興趣的讀者可以對(duì)這篇博客做更加完善的改正。