Spring MVC表单教程

最新推荐文章于 2021-06-18 22:30:17 发布

dnc8371

最新推荐文章于 2021-06-18 22:30:17 发布

阅读量289

点赞数

文章标签： java spring vue html web ViewUI

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

先决条件：

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

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

要求：

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

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

首先，让我们设置用于存储订户信息的对象。在包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;
	}

	@Override
	public 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。