场景

在机票预定的业务场景中，jsp页面需要记录航班相关信息和联系人相关信息还要记录多个乘客的相关信息。这就需要在向后端传值时某乘客属性为多个对象。

实现

所有的数据封装成一个Moel类，其中航班信息和联系人信息等单独的信息作为model的属性，乘客信息作为model的list属性，每一个list又是一个对象，对应的属性即为乘客的属性。

JSP页面代码

jsp页面通过表单提交，所对应的name属性要与后台接收时的model的属性相对应。

示例代码：

<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">联系人</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="请输入联系人姓名" /></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属性对应的是航班相关的信息，最下面的联系人属性就是对应的一个联系人属性，中间就是对应的多个乘客的信息。

通过js控制循环填写list信息。

比如第一个乘客的姓名对应的是：

name="bookInfoList[0].chineseName"

那么第二个乘客对应的就是：

name="bookInfoList[1].chineseName"

当然chineseName要与后台乘客对象的姓名属性相一致。

对应Model代码

public class PiaoHouGJBookInfoPayViewModel {private String contactAreaCode;private String contactAreaMobile;private String email; //邮箱地址private String coupon; //优惠券编号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方法。

其中上面的属性与航班和联系人等唯一的属性想对应，最后面的list就与乘客信息相对应。

乘客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,"机票预订失败：");if(!bsm.isFlag()) {return bsm.getJsonResult();}//业务部分return this.service.getGJBookPayValidateJson(model,bsm);}catch (Exception e) {LogService.getInstance(this).debug("机票预订失败："+Status.UNKNOWN_SESSION_EXCEPTION.toString()+e.getMessage());return JsonResult.jsonWsReturn(Status.ERROR.getCode(), Status.ERROR.getDescriptionZh(), Status.ERROR.getCode());}}

效果

前端页面效果

后台断点调试效果

获取的bookInfoList就是用来存放乘客信息的

SSM中向后端传递的属性为多个对象的实现方法相关推荐

在HashSet集合中添加三个Person对象，把姓名相同的人当作同一个人，禁止重复添加。提示：Person类中定义name和age属性，重写hashCode()方法和equals()方法，针对Pe
题目: 在HashSet集合中添加三个Person对象,把姓名相同的人当作同一个人,禁止重复添加. 提示:Person类中定义name和age属性,重写hashCode()方法和equals()方法, ...
java boolean 对象_为什么Java后端用Boolean属性筛选不出对象,但改成String类型就可以了?...
public JSONArray getTreeNodes(String departmentSn) { Department department = new Department(); JSONA ...
html中文本两端对齐的属性,text-algin:justify实现文本两端对齐方法小结
text-align:justify与text-align-last:justify 1.text-align MDN中这样介绍到:"text-align CSS属性定义行内内容(例如文字) ...
JavaScript中四种不同的属性检测方式比较
JavaScript中四种不同的属性检测方式比较 1. 用in方法 var o = {x:1}; "x" in o; //true "y" in o; //fa ...
SSM中通过Json做前后端分离
场景前面项目已经搭建到SSM中进行注解式和XML配置式事务管理阶段参照: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/851 ...
SSM中PageHelper的使用步骤与com.github.pagehelper.PageHelper3系列与5系列的区别
SSM中PageHelper的使用步骤一. 在pom.xml导入依赖 <dependency><groupId>com.github.pagehelper</group ...
vue下载表格为excel文件,需要后端传递list集合
一次学习记录原文链接:(16条消息) Vue--表格导出excel(导出table表格所有数据)_Hsu yiqi的博客-CSDN博客_vue表格导出excelhttps://blog.csdn.n ...
ssm中怎么使tomcat一起动就执行一个controller_【200期】面试官：你能简单说说 SpringMVC 的执行原理吗？...
点击上方"Java面试题精选",关注公众号面试刷图,查缺补漏 >>号外:往期面试题,10篇为一个单位归置到本公众号菜单栏->面试题,有需要的欢迎翻阅阶段汇总集 ...
android post json格式,Android中post请求传递json数据给服务端的实例
在最近的项目中有个需求是这样的: 入参封装成JSON,EXAMPLE: { "uuid": "iamauuid","clientType": ...

SSM中向后端传递的属性为多个对象的实现方法

场景

实现

JSP页面代码

对应Model代码

乘客model代码

后台Controller代码

效果

SSM中向后端传递的属性为多个对象的实现方法相关推荐

最新文章

热门文章