场景
在机票预定的业务场景中，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就是用来存放乘客信息的
699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
