javascript
Spring MVC表单教程
本教程將展示如何在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;}@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。
資源資源
- Spring Form TagLib參考文檔
- DZone – Spring Form標簽教程
翻譯自: https://www.javacodegeeks.com/2013/04/spring-mvc-form-tutorial.html
總結
以上是生活随笔為你收集整理的Spring MVC表单教程的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 如何通过手机设置无线路由器密码如何访问无
- 下一篇: 水星路由器怎么设置动态IP上网如何 设置