Java Web編程技術(shù) 課件 第11章數(shù)據(jù)綁定與表單標(biāo)簽庫(kù)

JavaWeb編程技術(shù)這種將請(qǐng)求消息數(shù)據(jù)與后臺(tái)方法參數(shù)建立關(guān)聯(lián)的過程就是SpringMVC的數(shù)據(jù)綁定。SpringMVC提供了一個(gè)表單標(biāo)簽庫(kù)可以實(shí)現(xiàn)數(shù)據(jù)綁定。SpringMVC數(shù)據(jù)綁定SpringMVC表單標(biāo)簽庫(kù)第11章數(shù)據(jù)綁定與表單標(biāo)簽庫(kù)在查詢執(zhí)行時(shí)，SpringMVC會(huì)根據(jù)客戶端請(qǐng)求參數(shù)的不同，將請(qǐng)求消息中的信息以一定的方式轉(zhuǎn)換并綁定到控制器類的方法參數(shù)中。數(shù)據(jù)綁定在數(shù)據(jù)綁定過程中，SpringMVC框架會(huì)通過數(shù)據(jù)綁定組件（DataBinder）將請(qǐng)求參數(shù)串的內(nèi)容進(jìn)行類型轉(zhuǎn)換，然后將轉(zhuǎn)換后的值賦給控制器類中方法的形參，這樣后臺(tái)方法就可以正確綁定并獲取客戶端請(qǐng)求的參數(shù)了。例如，可以將表單域綁定到Book對(duì)象的屬性，如果輸入數(shù)據(jù)合法，輸入值將被轉(zhuǎn)換成相應(yīng)類型的數(shù)據(jù)保存到Book模型對(duì)象中，若輸入驗(yàn)證失敗，控制轉(zhuǎn)回到輸入頁面，并將模型數(shù)據(jù)綁定到表單元素上。圖11-1說明了圖書價(jià)格綁定失敗，控制轉(zhuǎn)回到輸入頁面。11.1數(shù)據(jù)綁定

在SpringMVC框架中，數(shù)據(jù)綁定有這樣幾種情況：將請(qǐng)求參數(shù)綁定到請(qǐng)求處理方法的簡(jiǎn)單參數(shù)中或域模型屬性上；模型數(shù)據(jù)到表單元素的綁定（如在控制器中初始化下拉列表選項(xiàng)值，然后添加到模型中綁定到表單元素上）；模型數(shù)據(jù)到視圖（表單字段）的綁定。11.1表單標(biāo)簽庫(kù)SpringMVC提供了一個(gè)表單標(biāo)簽庫(kù)，用于在JSP頁面中生成HTML表單標(biāo)簽。使用這些標(biāo)簽可以實(shí)現(xiàn)數(shù)據(jù)綁定。通過數(shù)據(jù)綁定特征，可以將請(qǐng)求參數(shù)填充模型的各種類型屬性。這種數(shù)據(jù)綁定的一個(gè)好處是，當(dāng)輸入驗(yàn)證失敗時(shí)，會(huì)重新生成一個(gè)表單，無需重新填寫輸入字段。表單標(biāo)簽庫(kù)定義在spring-webmvc-5.3.20.jar文件中，要使用表單標(biāo)簽，在JSP頁面中使用下面taglib指令。<%@taglibprefix="form"uri="/tags/form"%>11.2表單標(biāo)簽庫(kù)表11-1給出了表單標(biāo)簽庫(kù)的常用標(biāo)簽。在下面小節(jié)中我們將討論每一個(gè)標(biāo)簽，還通過一個(gè)示例演示使用表單標(biāo)簽實(shí)現(xiàn)數(shù)據(jù)綁定。11.2標(biāo)簽名說

明form生成HTML的表單元素input生成HTML的<inputtype="text"/>元素password生成HTML的<inputtype="passsword"/>元素hidden生成HTML的<inputtype="hidden"/>元素textarea生成HTML的textarea元素checkbox生成HTML的<inputtype="checkbox"/>元素checkboxes生成多個(gè)<inputtype="checkbox"/>元素radiobutton生成HTML的<inputtype="radiobutton"/>元素radiobuttons生成多個(gè)<inputtype="radiobutton"/>元素select生成HTML的select元素option生成HTML的option元素options生成多個(gè)option元素errors在span元素中生成字段錯(cuò)誤<form>標(biāo)簽<form>標(biāo)簽用來生成HTML的表單標(biāo)簽。要?jiǎng)?chuàng)建表單輸入域必須首先創(chuàng)建一個(gè)表單標(biāo)簽，<form>標(biāo)簽的屬性如表11-2示。11.2.1屬性名說

明modelAttribute指定綁定的模型屬性的名稱。默認(rèn)值為commandacceptCharset指定服務(wù)器接受的字符編碼列表cssClass指定表單元素CSS樣式類名，相當(dāng)于HTML的class屬性。示例：<form:inputpath="userName"cssClass="inputStyle"/>。cssStyle指定表單元素CSS樣式名，相當(dāng)于HTML的style屬性。示例：<form:inputpath="userName"cssStyle="width:100px"/>。htmlEscape指定輸出是否包含HTML轉(zhuǎn)義字符，值為true或false<form>標(biāo)簽modelAttibute屬性可能是最重要的屬性，它指定模型的名稱，模型中包含的屬性值將用于填充表單字段。如果指定該屬性，必須在請(qǐng)求處理方法中添加對(duì)應(yīng)的模型對(duì)象，該方法返回包含該表單的視圖。例如，下面代碼在<form>標(biāo)簽中指定了modelAttibute屬性。在BookController類的inputBook()方法是請(qǐng)求處理方法，它返回inputBook.jsp視圖。下面是inputBook()方法代碼。<form:formmodelAtribute="book"action="save-book"method="post">...</form:form>@RequestMapping(value="/input-book")publicStringinputBook(Modelmodel){...model.addAttribute("book",newBook());return"inputBook";}11.2.1<form>標(biāo)簽

腳下留神在Spring5之前，<form>標(biāo)簽的commandName屬性用于指定綁定的表單對(duì)象的名稱。從Spring5開始，commandName屬性被modelAttribute屬性替換。如果在Spring5中使用commandName屬性，則會(huì)導(dǎo)致運(yùn)行時(shí)異常。11.2.1<input>標(biāo)簽<input>標(biāo)簽用來生成HTML的<inputtype="text"/>元素，該標(biāo)簽常用的屬性如表11-3所示。該標(biāo)簽最重要的屬性是path，它將該輸入字段綁定到表單支持對(duì)象的屬性上。例如，如果form標(biāo)簽的modelAttibute屬性值是book，而<input>標(biāo)簽的path屬性值是isbn，那么該<input>標(biāo)簽將被綁定到Book對(duì)象的isbn屬性上。11.2.2屬性名說

明path指定屬性綁定的表單對(duì)象的屬性名cssClass指定表單元素CSS樣式名，相當(dāng)于HTML的class屬性cssStyle指定表單元素CSS樣式名，相當(dāng)于HTML的style屬性cssErrorClass指定當(dāng)表單元素發(fā)生錯(cuò)誤時(shí)對(duì)應(yīng)的樣式類htmlEscape指定輸出是否包含HTML轉(zhuǎn)義字符，值為true或false<input>標(biāo)簽下面的<input>標(biāo)簽綁定到表單屬性的author屬性上。這與下面的<input/>標(biāo)簽等價(jià)。<form:inputid="author"path="author"cssErrorClass="errorBox"/><inputtype="text"id="author"name="author"/>11.2.2這里，cssErrorClass屬性只有在author屬性發(fā)生輸入驗(yàn)證錯(cuò)誤并且使用相同表單重新顯示用戶輸入時(shí)才有效，此時(shí)，input標(biāo)簽轉(zhuǎn)換為如下input元素。inputtype="text"id="author"name="author"class="errorBox"/><label>標(biāo)簽<label>標(biāo)簽用來生成HTML的<label>元素。該標(biāo)簽最重要的屬性是path，它將該輸入字段綁定到表單支持對(duì)象的屬性上。

例如，如果<form>標(biāo)簽的modelAttibute屬性值是customer，而input標(biāo)簽的path屬性值是id，那么該<input>標(biāo)簽將被綁定到Customer對(duì)象的id屬性上。11.2.3<hidden>標(biāo)簽<hidden>標(biāo)簽用于生成HTML的<inputtype="hidden"/>元素，該標(biāo)簽與<input>標(biāo)簽類似，但它不能顯示，沒有可視外觀，因此不支持cssClass和cssStyle屬性，但有htmlEscape和path屬性。下面是<hidden>標(biāo)簽的示例。<form:hiddenpath="productId"/>11.2.4<password>標(biāo)簽<password>標(biāo)簽用于生成<inputtype="password"/>元素，該標(biāo)簽與<input>標(biāo)簽類似，具有cssClass、cssStyle、cssErrorClass、htmlEscape和path屬性，另外還包含一個(gè)showPassword屬性，該屬性指定是否顯示密碼，默認(rèn)值為false。下面是<password>標(biāo)簽的示例。<form:passwordid="pwd"path="password"cssClass="normal"/>11.2.5<textarea>標(biāo)簽<textarea>標(biāo)簽用于生成HTML的textarea元素。textarea元素也是一個(gè)輸入元素，它支持多行輸入。該標(biāo)簽與input標(biāo)簽類似，具有cssClass、cssStyle、cssErrorClass、htmlEscape和path屬性?？梢酝ㄟ^HTML的rows和cols屬性指定textarea尺寸。rows規(guī)定了文本區(qū)內(nèi)的可見行數(shù)，cols規(guī)定了文本區(qū)內(nèi)的可見列數(shù)。下面是<textarea>標(biāo)簽的示例。<form:textareapath="note"tabindex="4"rows="5"cols="80"/>11.2.6<checkbox>標(biāo)簽<checkbox>標(biāo)簽用于生成<inputtype="checkbox"/>元素，它具有cssClass、cssStyle、cssErrorClass、htmlEscape和path屬性。此外，還有一個(gè)label屬性，它的值用于顯示復(fù)選框的標(biāo)簽文本。下面<checkbox>標(biāo)簽綁定到outOfStock屬性。<form:checkboxpath="outOfStock"value="OutofStock"/>11.2.7<checkboxes>標(biāo)簽<checkboxes>標(biāo)簽用于生成多個(gè)<inputtype="checkbox"/>元素，可出現(xiàn)在該標(biāo)簽中的屬性如表11-4所示，這些屬性都是可選的且不包含HTML屬性。11.2.8屬性名說

明cssClass指定表單元素CSS樣式名，相當(dāng)于HTML的class屬性cssStyle指定表單元素CSS樣式名，相當(dāng)于HTML的style屬性cssErrorClass指定當(dāng)表單元素發(fā)生錯(cuò)誤時(shí)對(duì)應(yīng)的樣式類htmlEscape指定輸出是否包含HTML轉(zhuǎn)義字符，值為true或falsepath指定屬性綁定的表單對(duì)象的屬性名delimiter指定兩個(gè)輸入元素之間的分隔符。默認(rèn)情況沒有分隔符element指定一個(gè)HTML元素來包含每個(gè)輸入元素。默認(rèn)值是span元素items指定Collection、Map或?qū)ο髷?shù)組用來產(chǎn)生輸入元素itemLabelitems屬性中Collection、Map或?qū)ο髷?shù)組的屬性，它們?yōu)槊總€(gè)輸入元素提供文本標(biāo)記itemValueCollection、Map或?qū)ο髷?shù)組的屬性，它們?yōu)槊總€(gè)輸入元素提供值<radiobutton>標(biāo)簽<radiobutton>標(biāo)簽用于生成<inputtype="radio"/>元素，它具有與checkbox標(biāo)簽相同的屬性，包括：cssClass、cssStyle、cssErrorClass、htmlEscape、label和path屬性。通常把多個(gè)radiobutton標(biāo)簽綁定到同一屬性上，但它們具有不同的value屬性值。下面的<radiobutton>標(biāo)簽綁定到gender屬性上。性別：<form:radiobuttonpath="gender"value="Male"/><br/><form:radiobuttonpath="gender"value="Female"/>11.2.9<radiobuttons>標(biāo)簽<radiobuttons>標(biāo)簽用來生成多個(gè)<inputtype="radio"/>元素，可出現(xiàn)在該標(biāo)簽中的屬性與<checkboxes>標(biāo)簽的屬性相同。下面的<radiobuttons>標(biāo)簽產(chǎn)生模型屬性categoryList的內(nèi)容作為單選按鈕組，在一個(gè)時(shí)刻只能選擇一個(gè)選項(xiàng)。<form:radiobuttonspath="category"items="${categoryList}"/>11.2.10<select>標(biāo)簽<select>標(biāo)簽用于生成HTML的select元素，它用來構(gòu)建一個(gè)下拉列表框。列表的選項(xiàng)可通過items指定一個(gè)集合、Map或數(shù)組，或者來自嵌套的<option>標(biāo)簽或<options>標(biāo)簽?？沙霈F(xiàn)在該標(biāo)簽中的屬性與radiobuttons標(biāo)簽的屬性相同。其中，path屬性指定對(duì)應(yīng)表單對(duì)象的屬性值；items屬性用于構(gòu)造下拉列表框選項(xiàng)的數(shù)據(jù)。items屬性是最有用的屬性，它可被綁定到集合、Map或?qū)ο髷?shù)組產(chǎn)生select元素的選項(xiàng)。例如，下面select標(biāo)簽綁定到表單支持對(duì)象category屬性的id屬性。它的選項(xiàng)來自categories模型屬性。每個(gè)選項(xiàng)值來自categories集合中每個(gè)對(duì)象的id屬性，它的標(biāo)簽來自name屬性。<form:selectid="category"path="category.id"items="${categories}"itemLabel="name"itemValue="id"/>11.2.11<option>標(biāo)簽<option>標(biāo)簽用來生成一個(gè)HTML的option元素，它用來定義下拉列表的一個(gè)選項(xiàng)，它必須用在<select>標(biāo)簽內(nèi)。下面是<option>標(biāo)簽的示例。<form:selectid="category"path="category.id"items="${categories}"itemLabel="name"itemValue="id"><form:optionvalue="0">--Pleaseselect--</form:option></form:select>11.2.12<options>標(biāo)簽<options>標(biāo)簽用來生成一個(gè)HTML的option元素的列表，下面是該標(biāo)簽的一個(gè)示例。<form:selectpath="country"><form:optionvalue="0">--請(qǐng)選擇--</form:option><form:optionsitems="${countryList}"itemValue=”code”itemLabel=”name”></form:options></form:select>11.2.13<errors>標(biāo)簽<errors>標(biāo)簽用來生成一個(gè)或多個(gè)HTML的span元素，其中每個(gè)包含一個(gè)字段錯(cuò)誤消息。該標(biāo)簽可用來顯示一個(gè)特定字段錯(cuò)誤或所有字段錯(cuò)誤。errors標(biāo)簽的屬性如表11-5所示。所有的屬性都是可選的，表中不包含可出現(xiàn)在span元素中的HTML屬性。下面的<errors>標(biāo)簽將顯示所有字段的錯(cuò)誤消息。下面的<errors>標(biāo)簽將顯示與表單支持對(duì)象email屬性相關(guān)的字段錯(cuò)誤消息。<form:errorspath="*"/><form:errorspath="email"/>11.2.14案例學(xué)習(xí)：表單標(biāo)簽應(yīng)用使用Spring表單標(biāo)簽庫(kù)的最大好處是數(shù)據(jù)綁定。下面的例子演示如何使用SpringMVC的密碼框、文本區(qū)、單選按鈕和列表框等標(biāo)簽。11.3.1設(shè)計(jì)POJO類11.3.2控制器類11.3.3視圖11.3.4測(cè)試應(yīng)用程序11.3案例學(xué)習(xí)：表單標(biāo)簽應(yīng)用11.3User.java清單11.1publicclassUser{privateStringusername;//用戶名privateStringpassword;//密碼privateStringgender;//性別privateStringresume;//簡(jiǎn)歷privateString[]hobby;//業(yè)余愛好privateStringlanguage;//精通的語言privateStringeducation;//學(xué)歷privateString[]skills;//技能privatebooleanreceiveEmail;//是否訂閱郵件}控制器類UserController.java清單11.2控制器類UserController定義了兩個(gè)請(qǐng)求處理方法和幾個(gè)普通方法。@ControllerpublicclassUserController{@RequestMapping(value="/input-user",method=RequestMethod.GET)publicModelAndViewinputUser(){Useruser=newUser(); user.setHobby((newString[]{"游泳","讀書","登山"}));user.setGender("M");ModelAndViewmodelAndView=

newModelAndView("inputUser","command",user);returnmodelAndView;}11.3.2@RequestMapping(value="/save-user",method=RequestMethod.POST)publicStringsaveUser(@ModelAttribute("user")Useruser,ModelMapmodel){model.addAttribute("username",user.getUsername());model.addAttribute("password",user.getPassword());model.addAttribute("resume",user.getResume());model.addAttribute("receiveEmail",user.isReceiveEmail()); model.addAttribute("hobbyList",user.getHobby());model.addAttribute("gender",user.getGender());model.addAttribute("languageList",user.getLanguage());model.addAttribute("education",user.getEducation());model.addAttribute("skills",user.getSkills());return"showUser";}//返回hobbyList對(duì)象并將其設(shè)置為模型屬性

@ModelAttribute("hobbyList")publicList<String>getHobbyList(){List<String>hobbyList=newArrayList<String>();hobbyList.add("讀書");hobbyList.add("游泳");hobbyList.add("登山");returnhobbyList;}//返回languageList對(duì)象并將其設(shè)置為模型屬性@ModelAttribute("languageList")publicList<String>getLanguageList(){List<String>languageList=newArrayList<String>();languageList.add("C");languageList.add("C++");languageList.add("Java");languageList.add("Python");returnlanguageList;}//返回educationList對(duì)象并將其設(shè)置為模型屬性@ModelAttribute("educationList")publicMap<String,String>getEducationList(){Map<String,String>educationList=newHashMap<String,String>();educationList.put("1","學(xué)士");educationList.put("2","碩士");educationList.put("3","博士");returneducationList;}//返回skillsList對(duì)象并將其設(shè)置為模型屬性@ModelAttribute("skillsList")publicMap<String,String>getSkillsList(){Map<String,String>skillList=newHashMap<String,String>();skillList.put("Spring","Spring");skillList.put("SpringMVC","SpringMVC");skillList.put("MyBatis","MyBatis");returnskillList;}視圖inputUser.jsp清單11.3本應(yīng)用包含兩個(gè)視圖頁面，inputUser.jsp和showUser.jsp，將它們保存在WEB-INF\jsp目錄中。<form:formmethod="post"action="save-user"><fieldset><legend>添加用戶信息</legend><table><tr><td><form:labelpath="username">用戶名</form:label></td><td><form:inputpath="username"/></td></tr><tr><td><form:labelpath="password">口令</form:label></td><td><form:passwordpath="password"/></td></tr>11.3.3<tr><td><form:labelpath="gender">性別</form:label></td><td><form:radiobuttonpath="gender"value="M"label="男"/><form:radiobuttonpath="gender"value="F"label="女"/></td></tr><tr><td><form:labelpath="resume">簡(jiǎn)歷</form:label></td><td><form:textareapath="resume"rows="5"cols="30"/></td></tr><tr><td><form:labelpath="hobby">業(yè)余愛好</form:label></td><td><form:checkboxespath="hobby"items="${hobbyList}"/></td></tr><tr><td><form:labelpath="language">精通的語言</form:label></td><td><form:radiobuttonspath="language"items="${languageList}"/> </td></tr><tr><td><form:labelpath="education">學(xué)歷</form:label></td><td><form:selectpath="education"><form:optionvalue="NONE"label="Select"/><form:optionsitems="${educationList}"/></form:select> </td></tr><tr><td><form:labelpath="skills">技能</form:label></td><td><form:selectpath="skills"items="${skillsList}"multiple="true"/></td></tr><tr><td><form:labelpath="receiveEmail">是否訂閱郵件</form:label></td><td><form:checkboxpath="receiveEmail"/></td></tr> <tr><tdcolspan="2"><inputtype="submit"value="提交"/></td></tr></table></fieldset></form:form>showUser.jsp清單11.4<fieldset><l