SSM中向后端传递的属性为多个对象的实现方法
場景
在機票預(yù)定的業(yè)務(wù)場景中,jsp頁面需要記錄航班相關(guān)信息和聯(lián)系人相關(guān)信息還要記錄多個乘客的相關(guān)信息。這就需要在向后端傳值時某乘客屬性為多個對象。
實現(xiàn)
所有的數(shù)據(jù)封裝成一個Moel類,其中航班信息和聯(lián)系人信息等單獨的信息作為model的屬性,乘客信息作為model的list屬性,每一個list又是一個對象,對應(yīng)的屬性即為乘客的屬性。
JSP頁面代碼
jsp頁面通過表單提交,所對應(yīng)的name屬性要與后臺接收時的model的屬性相對應(yīng)。
示例代碼:
<form id="book" action="${ctx}/frontPage/passFlight/GJbookPayValidate" class="plug_form" method="post" onsubmit="return false"><input type="hidden" name="from" value="${hiddenModel.from}"/><input type="hidden" name="to" value="${hiddenModel.to}"/><input type="hidden" name="leaveDate" value="${hiddenModel.leaveDate}"/><input type="hidden" name="seqno" value="${hiddenModel.seqno}"/><input type="hidden" name="price" value=""/><input type="hidden" name="phone" id="phone" value="${phone}"/><section id="plug_addlist" class="ovh"><div class="press bg_white mt_2em mb_2em wm_94 bor_rad_05em"><input type="hidden" class="plugin_ticket_user_id" name="bookInfoList[0].ticketUserId" /><article class="w_100 ovh bg_title_sub bor_bottom bor_gray_ddd"><h3 class="fl line_h_24em bg_title c_white pr_3 pl_3 text_14em dis_block ovh"></h3><button class="plug_dellink fr line_h_32em bg_title_sub c_white pl_3 pr_3" type="button"><i class="text_al_m mr_02em iconfont icon-guanbi1"></i>刪除</button></article><ul class="ovh wm_94 mt_3"><li class="rel clear ovh"><dl class="fl w_80 ovh pt_07em plug_language plug_language0"><dd class="fl w_100 abs"><input type="text" name="bookInfoList[0].chineseName" data-tip=" " data-valid="isNonEmpty" data-error=" "? class="required w_100 h_36em line_h_36em c_gray_777 bor_bottom bor_title_tint" value="" placeholder="姓名,請與登機證件姓名保持一致" /></dd><dd class="fl w_100 abs dis_none"><input type="text" name="bookInfoList[0].firstName" data-tip=" " data-valid="isNonEmpty" data-error=" "? class="required w_50 ml_5 fl h_36em line_h_36em c_gray_777 bor_bottom bor_title_tint" value="" placeholder="名(拼音) Given name" /><input type="text" name="bookInfoList[0].lastName" data-tip=" " data-valid="isNonEmpty" data-error=" " class="required w_45 fl h_36em line_h_36em c_gray_777 bor_bottom bor_title_tint" value="" placeholder="姓(拼音) Surname" /></dd></dl><div class="fr w_20 rel h_36em mt_07em bor_bottom bor_title_tint"><input name="bookInfoList[0].checkboxSwitchName" type="checkbox" id="checkbox_c0" class="checkbox_switch checkbox_switch0"/><label for="checkbox_c0" class="fr mr_5"></label><span class="fr line_h_36em mr_05em">中/英</span></div></li><!-- 中文姓 和中文名 --><li class="rel clear ovh"><dl class="fl w_100 ovh pt_07em"><dd class="fl w_100 rel"><input type="text" name="bookInfoList[0].chineseFirstName" data-tip=" " data-valid="isNonEmpty" data-error=" "? class="required plug_chineseFirstName w_50 ml_5 fl h_36em line_h_36em c_gray_777 bor_bottom bor_title_tint" value="" placeholder= "中文姓(拼音)"?onkeyup="value=value.replace(/[^a-zA-Z]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^a-zA-Z]/g,''))"/><input type="text" name="bookInfoList[0].chineseLastName" data-tip=" " data-valid="isNonEmpty" data-error=" " class="required plug_chineseLastName w_45 fl h_36em line_h_36em c_gray_777 bor_bottom bor_title_tint" value="" placeholder= "中文名(拼音)"onkeyup="value=value.replace(/[^a-zA-Z]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^a-zA-Z]/g,''))" /></dd></dl></li><li class="rel clear ovh"><dl class="fl w_100 ovh pt_07em"><dd class="fl w_100 rel"><input type="text" name="bookInfoList[0].email" data-tip=" " data-valid="isNonEmpty||isEmail" data-error=" || " class="required plug_pass_email_auto plug_pass_email_auto0 w_100 fl h_36em line_h_36em c_gray_777 bor_bottom bor_title_tint" value="" placeholder="請輸入您的郵箱地址" /></dd></dl></li><li class="rel clear ovh"><dl class="fl w_100 ovh pt_07em"><dd class="fl w_100 rel"><select name="bookInfoList[0].cardType" class="plug_select_card plug_select_card0 w_35 fl line_h_36em bor_bottom bor_title_tint c_gray_777 text_al_l"><c:forEach items="${otherList.idList}" var="item"><option value="${item.key}">${item.key}</option></c:forEach></select><input type="text" name="bookInfoList[0].cardCode" data-tip=" " data-valid="isNonEmpty" data-error=" "? class="required plug_cardCode w_60 ml_5 fl h_36em line_h_36em c_gray_777 bor_bottom bor_title_tint" value="" placeholder="請輸入登機證件號碼" /><input type="hidden" id="country2" name="bookInfoList[0].country2" class="plug_country2" /></dd></dl></li><!-- ? 證件有效期 --><li class="rel clear ovh"><dl class="fl w_100 ovh pt_07em"><dd class="fl w_100 rel"><input type="text" id="validDate" name="bookInfoList[0].validDate" class="plug_datetime1 required? w_100 h_36em line_h_36em"? readonly placeholder="請選擇證件有效期" data-valid="isNonEmpty"/></dd></dl></li><!--出生日期? --><li class="rel clear ovh"><dl class="fl w_100 ovh pt_07em"><dd class="fl w_100 rel"><input type="text" id="birthday" name="bookInfoList[0].birthday" class="plug_datetime2 required? w_100 h_36em line_h_36em"? readonly placeholder="請選擇出生日期"? data-valid="isNonEmpty"/></dd></dl></li><li class="rel clear ovh"><dl class="fl w_100 ovh pt_07em"><dd class="fl w_100 rel"><input type="text" name="bookInfoList[0].mobileAreaCode" class="required plug_mobileNum plug_mobileNum0 fl w_35 h_36em line_h_36em c_gray_777 bor_bottom bor_title_tint" value="中國 0086" data-valid="isNonEmpty"/><input type="text" name="bookInfoList[0].mobile" data-tip=" " data-valid="isNonEmpty||isMobile" data-error=" || " class="required w_60 ml_5 fl h_36em line_h_36em c_gray_777 bor_bottom bor_title_tint" value="" placeholder="乘機人手機號,用于接收航班信息" /></dd></dl></li><li class="rel clear ovh"><dl class="fl w_100 ovh pt_07em"><dd class="fl w_100 rel"><input? type="text"? id="nation" name="bookInfoList[0].nation" class="required plug_nation jDelete plug_guoji w_40 h_36em line_h_36em c_gray_777 bor_rad_05em bor_gray_ddd border bg_white" placeholder="請輸入國籍" data-tip="請輸入國籍" data-valid="isNonEmpty" data-error= "國籍不能為空"onkeyup="value=value.replace(/[^\u4e00-\u9fa5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4e00-\u9fa5]/g,''))"/></dd></dl></li><li class="rel clear ovh"><dl class="fl w_80 ovh pt_07em"><dt class="fl pt_08em text_al_r w_20"><span class="mr_10 line_h_2em">性別:</span></dt><dd class="fl ovh w_80 h_3em rel" data-type="radio"><label? class="plug_radio_sex plug_radio_sex0 text_12em mt_03em" data-name="radioSex"><input type="radio" flag="sex" name="bookInfoList[0].sex" value="男" checked="checked" /></label><span class="fl text_12em line_h_22em mr_3 ml_05em mt_03em">男</span><label? class="plug_radio_sex plug_radio_sex0 text_12em mt_03em" data-name="radioSex"><input type="radio" flag="sex" name="bookInfoList[0].sex" value="女"/></label><span class="fl text_12em line_h_22em mr_3 ml_05em mt_03em">女</span></dd></dl></li></ul></div></section><button class="plug_addlink fl ml_3 mb_2em btn_max w_20 bg_white c_title border bor_title h_3em" type="button"><i class="iconfont icon-tianjia"></i>添加乘客</button><div id="contactInfo" class="clear mt_1em ovh"><h3 class="wm_94 line_h_24em mb_05em c_title text_14em text_bold dis_block fl ovh bor_bottom_dashed bor_title_tint">聯(lián)系人</h3><div class="press bg_white mt_2em mb_2em wm_94 bor_rad_05em"><ul class="ovh wm_94 mt_3 pb_2em"><li class="rel clear ovh"><dl class="fl w_100 ovh pt_07em"><dd class="fl w_100 rel"><input type="text" id="contactName" name="contactName" data-tip=" "? data-valid="isNonEmpty" data-error=" " class="required plug_email_auto w_100 fl h_36em line_h_36em c_gray_777 bor_bottom bor_title_tint" value="" placeholder="請輸入聯(lián)系人姓名" /></dd></dl></li><li class="rel clear ovh"><dl class="fl w_100 ovh pt_07em"><dd class="fl w_100 rel"><input type="text" id="contactAreaCode" name="contactAreaCode" class="plug_mobileNum_contact fl w_35 h_36em line_h_36em c_gray_777 bor_bottom bor_title_tint" value="中國 0086"/><input type="text" id="contactAreaMobile" name="contactAreaMobile" data-tip=" "? data-valid="isNonEmpty||isMobile" data-error=" || " class="required w_60 ml_5 fl h_36em line_h_36em c_gray_777 bor_bottom bor_title_tint" value="" placeholder="乘機人手機號,用于接收航班信息" /></dd></dl></li><li class="rel clear ovh"><dl class="fl w_100 ovh pt_07em"><dd class="fl w_100 rel"><input id="email" type="text" name="email" data-tip=" " data-valid="isNonEmpty||isEmail" data-error=" || " class="required plug_email_auto w_100 fl h_36em line_h_36em c_gray_777 bor_bottom bor_title_tint" value="" placeholder="請輸入您的郵箱地址" /></dd></dl></li></ul></div></div><div></div><button id="payBut" class="wm_94 btn_max bg_gray_888 c_white h_3em mb_2em" disabled="disabled" type="submit">提交</button></form>注:
上面代碼中hidden屬性對應(yīng)的是航班相關(guān)的信息,最下面的聯(lián)系人屬性就是對應(yīng)的一個聯(lián)系人屬性,中間就是對應(yīng)的多個乘客的信息。
通過js控制循環(huán)填寫list信息。
比如第一個乘客的姓名對應(yīng)的是:
name="bookInfoList[0].chineseName"那么第二個乘客對應(yīng)的就是:
name="bookInfoList[1].chineseName"當(dāng)然chineseName要與后臺乘客對象的姓名屬性相一致。
對應(yīng)Model代碼
public class PiaoHouGJBookInfoPayViewModel {private String contactAreaCode;private String contactAreaMobile;private String email; //郵箱地址private String coupon; //優(yōu)惠券編號private String cabin; //艙位編號private String from;private String to;private String leaveDate;private String leaveTime;private String seqno;private String contactName;private String price;private Integer passOrderId;List<PiaoHouFrontBookInfoFormViewModel> bookInfoList;.... }中間省略get和set方法。
其中上面的屬性與航班和聯(lián)系人等唯一的屬性想對應(yīng),最后面的list就與乘客信息相對應(yīng)。
乘客model代碼
public class PiaoHouFrontBookInfoFormViewModel {private String chineseName;private String lastName;private String firstName;private String checkboxSwitchName;private String cardType;private String cardCode;private String mobileAreaCode;private String mobile;private String sex;private String passengerType;private String ticketUserId;private String savePass;private String email;private String chineseLastName; //中文姓private String chineseFirstName; //中文名private String nation;//國籍private String country2; //國家二字碼private Date birthday;private Date validDate;.... }中間省略get和set方法。
?
后臺Controller代碼
@ResponseBody@RequestMapping(value = "/GJbookPayValidate", method = RequestMethod.POST)public Map<String,Object> GJbookPayValidate(PiaoHouGJBookInfoPayViewModel model){try {//登錄賬戶驗證部分BaseSubjectModel bsm = SubjectUtil.validate(this.getClass(),loginType,"機票預(yù)訂失敗:");if(!bsm.isFlag()) {return bsm.getJsonResult();}//業(yè)務(wù)部分return this.service.getGJBookPayValidateJson(model,bsm);}catch (Exception e) {LogService.getInstance(this).debug("機票預(yù)訂失敗:"+Status.UNKNOWN_SESSION_EXCEPTION.toString()+e.getMessage());return JsonResult.jsonWsReturn(Status.ERROR.getCode(), Status.ERROR.getDescriptionZh(), Status.ERROR.getCode());}}效果
前端頁面效果
?
后臺斷點調(diào)試效果
?
獲取的bookInfoList就是用來存放乘客信息的
?
總結(jié)
以上是生活随笔為你收集整理的SSM中向后端传递的属性为多个对象的实现方法的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
 
                            
                        - 上一篇: 使用Xftp实现Windows与Linu
- 下一篇: SSM中通过okhttp3向接口发送xm
