Spring MVC表单教程

本教程将展示如何在Spring MVC中处理表单提交。我们将定义一个控制器来处理页面加载和表单提交。您可以在GitHub上获取代码。

先决条件：

您应该有一个运行中的Spring MVC应用程序。如果尚未设置正常的Spring MVC应用程序，请按照本教程进行操作。对于本教程，我们将制作一个简单的订阅新闻通讯的表格。该表格将包含以下字段：

名称–输入字段
年龄–输入栏
电子邮件–输入字段
性别-选择下拉菜单
receiveNewsletter –复选框
新闻通讯频率-选择下拉菜单

要求：

仅在选中receiveNewsletter复选框时， newsletterFrequency下拉列表才应处于活动状态
在此示例中，我们将不执行任何验证（敬请留意，以备以后使用）
用户提交表单时，将重新加载同一页面
重新加载的页面应显示一条消息，指示提交成功并显示保存的值

完成后，我们将出现一个如下所示的页面：

Spring MVC表单屏幕截图

首先，让我们设置用于存储订户信息的对象。在包com.codetutr.form创建类Subscriber 。这是一个基本的Java bean。请注意，我们使用枚举来存储性别和新闻通讯频率字段。为简单起见，我在同一类中定义了枚举。还要注意，我们正在定义toString 。这样做是为了便于我们在提交后轻松获取要打印的值。

Subscriber.java

package com.codetutr.form;public class Subscriber {private String name;private String email;private Integer age;private Gender gender;private Frequency newsletterFrequency;private Boolean receiveNewsletter;public enum Frequency {HOURLY, DAILY, WEEKLY, MONTHLY, ANNUALLY}public enum Gender {MALE, FEMALE}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}public Gender getGender() {return gender;}public void setGender(Gender gender) {this.gender = gender;}public Frequency getNewsletterFrequency() {return newsletterFrequency;}public void setNewsletterFrequency(Frequency newsletterFrequency) {this.newsletterFrequency = newsletterFrequency;}public Boolean getReceiveNewsletter() {return receiveNewsletter;}public void setReceiveNewsletter(Boolean receiveNewsletter) {this.receiveNewsletter = receiveNewsletter;}@Overridepublic String toString() {return "Subscriber [name=" + name + ", age=" + age + ", gender=" + gender+ ", newsletterFrequency=" + newsletterFrequency+ ", receiveNewsletter=" + receiveNewsletter + "]";}}

现在，让我们创建控制器。在包com.codetutr.controller创建类FormController ：

FormController.java

package com.codetutr.controller;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;import com.codetutr.form.Subscriber;
import com.codetutr.form.Subscriber.Frequency;@Controller
public class FormController {@ModelAttribute("frequencies")public Frequency[] frequencies() {return Frequency.values();}@RequestMapping(value="form", method=RequestMethod.GET)public String loadFormPage(Model m) {m.addAttribute("subscriber", new Subscriber());return "formPage";}@RequestMapping(value="form", method=RequestMethod.POST)public String submitForm(@ModelAttribute Subscriber subscriber, Model m) {m.addAttribute("message", "Successfully saved person: " + subscriber.toString());return "formPage";}
}

让我们看一下上面代码中的几件事。首先，请注意，两个请求处理程序（用@RequestMapping注释的方法）都映射到相同的URL –“ form”。映射的唯一区别是，一个处理HTTP GET请求，另一个处理POST。当用户导航到“表单”页面时，将调用第一个处理程序（用于GET请求），因为他们将使用GET请求访问该页面。提交表单时会调用POST处理程序（因为它将通过HTTP POST提交到“表单” URL）。当然，您可以使用任何HTTP方法将表单提交到任何URL –只需确保在此处相应地映射处理程序即可。

让我们看一下GET处理程序。它需要一个Model ，我们用一个空的Subscriber对象填充它。该对象是我们用来填充表单的对象。我们在这里没有设置任何值，但是如果我们愿意，例如将默认的receiveNewsletter复选框设置为true，并将默认的新闻通讯频率设置为每小时，则可以执行以下操作：

Subscriber subscriber = new Subscriber();
subscriber.setReceiveNewsletter(true);
subscriber.setNewsletterFrequency(Frequency.HOURLY);
m.addAttribute("subscriber", subscriber);

还要注意，如果我们不向模型添加名为“ subscriber”的对象，那么当我们尝试访问JSP时，Spring会抱怨，因为我们将设置JSP将表单绑定到“ subscriber” model属性。您将看到一个JSP错误：“ Bean名称'subscriber'的BindingResult和普通目标对象都不能用作请求属性”，并且JSP无法呈现。

控制器代码中最后要看的是@ModelAttribute方法。当使用@ModelAttribute注释方法时，Spring会在每个处理程序方法之前运行它，并将返回值添加到模型中。我们在注释中指定将“频率”值添加到模型中作为“频率”。该对象将用于在JSP表单中填充新闻通讯频率下拉框。代替使用@ModelAttribute方法，我们可以将以下行添加到每个请求处理程序中：

m.addAttribute("frequencies", Frequency.values())

最后，让我们设置jsp。在WEB-INF/view （或配置JSP所在的任何位置）中创建一个名为formPage.jsp的文件：

formPage.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %><!DOCTYPE HTML>
<html><head><title>Sample Form</title><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><style>body { background-color: #eee; font: helvetica; }#container { width: 500px; background-color: #fff; margin: 30px auto; padding: 30px; border-radius: 5px; box-shadow: 5px; }.green { font-weight: bold; color: green; }.message { margin-bottom: 10px; }label {width:70px; display:inline-block;}form {line-height: 160%; }.hide { display: none; }</style></head><body><div id="container"><h2>Subscribe to The Newsletter!</h2><c:if test="${not empty message}"><div class="message green">${message}</div></c:if><form:form modelAttribute="subscriber"><label for="nameInput">Name: </label><form:input path="name" id="nameInput" /><br/><label for="ageInput">Age: </label><form:input path="age" id="ageInput" /><br/><label for="emailInput">Email: </label><form:input path="email" id="emailInput" /><br/><label for="genderOptions">Gender: </label><form:select path="gender" id="genderOptions"><form:option value="">Select Gender</form:option><form:option value="MALE">Male</form:option><form:option value="FEMALE">Female</form:option></form:select><br/><label for="newsletterCheckbox">Newsletter? </label><form:checkbox path="receiveNewsletter" id="newsletterCheckbox" /><br/><label for="frequencySelect">Freq:</label><form:select path="newsletterFrequency" id="frequencySelect"><form:option value="">Select Newsletter Frequency: </form:option><c:forEach items="${frequencies}" var="frequency"><form:option value="${frequency}">${frequency}</form:option></c:forEach></form:select><br/><br/><input type="submit" value="Submit" /></form:form></div><script type="text/javascript">$(document).ready(function() {toggleFrequencySelectBox(); // show/hide box on page load$('#newsletterCheckbox').change(function() {toggleFrequencySelectBox();})});function toggleFrequencySelectBox() {if(!$('#newsletterCheckbox').is(':checked')) {$('#frequencySelect').val('');$('#frequencySelect').prop('disabled', true);} else {$('#frequencySelect').prop('disabled', false);}}</script></body>
</html>

让我们看一下我们正在使用的表单标签。请注意页面顶部的行： <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 。这将导入我们将要使用的Spring Form标签。当我们使用<form:form>标记打开表单时，请注意，我们正在指定model属性。这告诉Spring在Model中查找属性并将其绑定到表单。也可以指定action和method属性。如果未指定（如本例所示），则它们分别默认为当前URL和“ POST”（就像常规HTML表单一样）。

请注意，我们的每个输入字段都使用Spring Form taglib（form：前缀）。这些字段中的每个字段还指定一个path属性。根据标准Java bean约定（get / is，设置为前缀为首字母大写的字段名称），它必须对应于model属性（在本例中为Subscriber类）的getter或setter。加载页面时，Spring将填充输入字段，Spring将调用绑定到输入字段的每个字段的getter。提交表单后，将调用设置器以将表单的值保存到对象。

<form:input>标签很容易说明。注意使用了<form:select>的两个实例。请注意，在第一个选择下拉列表的“性别”字段中，我们手动列出了所有选项。不过，在新闻通讯的“频率选择”下拉列表中，我们遍历了“ frequencies模型属性（请记住，已通过Controller中的@ModelAttribute -annotated方法将其添加到模型中），并将每个项目添加为下拉菜单中的选项。提交表单时，只要所选选项的值是有效的枚举名称，Spring就会自动将表单值绑定到枚举。

提交表单后，将调用控制器中的POST处理程序。表单自动绑定到我们传入的订户参数。@ @ModelAttribute批注实际上在这里不是必需的。我将在另一篇文章中写更多有关它的内容。

你有它！我强烈建议您下载源代码并运行代码。在下面的评论中发表您的任何问题。

完整资源： ZIP和GitHub要运行本教程中的代码：必须已安装Gradle 。下载ZIP。提取。打开命令提示符以提取位置。运行gradle jettyRunWar。在浏览器中导航到http：// localhost：8080 / form。