Spring MVC---数据绑定和表单标签详解

数据绑定和表单标签

数据绑定

数据绑定是将用户输入绑定到领域模型的一种特性，在spring mvc的controller和view数据传递中，基于http请求的特性，所有http请求参数的类型均为字符串，如果模型领域需要绑定的类型为double或int，则需要手动进行类型转换，而有了数据绑定后，就不需要手动将http请求中的string类型转换为模型需要的类型了，数据绑定的另一个好处是，当输入验证失败时，会重新生成一个html表单，无需重新填写输入字段。

表单标签库

表单标签库中包含了可以用在jsp页面中渲染html元素的标签。为了使用这些标签，必须在jsp页面开头处声明taglib指令。

<%@ 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属性上 

<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方法：

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），代码如下:

@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, "台球");
    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文件的配置信息：

<?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来避免中文乱码的问题。

<%@ 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信息的遍历展示。

<%@ 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的性别了，导致输入性别列为空。这些问题是由于本文的疏忽造成的，有兴趣的读者可以对这篇博客做更加完善的改正。

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。