|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
pageEncoding="UTF-8"%>
|
|
|
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
|
|
|
<%
|
|
|
// 获取当前项目的上下文路径，例如在部署到服务器后，可能是项目名称对应的路径部分，后续用于构建完整的资源访问路径等。
|
|
|
String path = request.getContextPath();
|
|
|
// 构建项目的基础路径，包括协议（如http或https）、服务器名称、服务器端口以及上下文路径，用于准确地定位项目中的各种资源，比如样式表、脚本文件、图片等资源的引用地址都会基于这个基础路径来构建。
|
|
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
|
|
|
%>
|
|
|
<!--_meta 作为公共模版分离出去-->
|
|
|
<!DOCTYPE HTML>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<!-- 设置页面的字符编码为utf-8，确保能正确显示各种字符 -->
|
|
|
<meta charset="utf-8">
|
|
|
<!-- 定义页面的渲染引擎模式，这里指定了webkit（适用于Chrome、Safari等浏览器）、ie-comp（兼容IE的某些模式）、ie-stand（标准IE模式）等多种模式，以提高页面在不同浏览器上的兼容性 -->
|
|
|
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
|
|
<!-- 强制让页面以IE的最高版本模式或者Chrome浏览器的模式渲染，避免在IE中出现兼容性问题 -->
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
<!-- 设置页面的视口（viewport）相关属性，规定页面宽度等于设备宽度，初始缩放比例、最小缩放比例、最大缩放比例都设为1.0，禁止用户手动缩放页面，以实现页面在移动设备上较好的展示效果 -->
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
|
|
|
<!-- 禁止浏览器对页面进行缓存，每次访问都重新获取页面内容，常用于页面内容经常更新的情况 -->
|
|
|
<meta http-equiv="Cache-Control" content="no-siteapp" />
|
|
|
<!-- 设置页面的书签图标（Bookmark）链接，指向/favicon.ico文件，一般用于在浏览器书签栏显示图标 -->
|
|
|
<link rel="Bookmark" href="/favicon.ico" >
|
|
|
<!-- 设置页面的快捷图标（Shortcut Icon）链接，同样指向/favicon.ico文件，用于在浏览器标签页、地址栏等位置显示图标 -->
|
|
|
<link rel="Shortcut Icon" href="/favicon.ico" />
|
|
|
<!-- 条件注释，当浏览器版本小于IE9时，引入html5shiv.js和respond.min.js脚本文件，这两个文件用于让低版本IE浏览器（IE8及以下）支持HTML5标签和CSS3的媒体查询特性 -->
|
|
|
<if lt IE 9>
|
|
|
<script type="text/javascript" src="lib/html5shiv.js"></script>
|
|
|
<script type="text/javascript" src="lib/respond.min.js"></script>
|
|
|
<![endif]>
|
|
|
<!-- 引入H-ui框架的核心样式表文件，用于构建页面的基本样式布局，路径是基于前面构建的basePath来定位的 -->
|
|
|
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui/css/H-ui.min.css" />
|
|
|
<!-- 引入H-ui.admin框架的样式表文件，通常用于后台管理系统的页面样式定制，包含了更多与管理界面相关的样式设置 -->
|
|
|
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/H-ui.admin.css" />
|
|
|
<!-- 引入Hui-iconfont图标字体库的样式表文件，用于在页面中使用相应的图标字体来展示各种图标，提高页面的可视化效果 -->
|
|
|
<link rel="stylesheet" type="text/css" href="<%=basePath%>lib/Hui-iconfont/1.0.8/iconfont.css" />
|
|
|
<!-- 引入H-ui.admin框架的默认皮肤样式表文件，用于设置页面的皮肤风格，这里可以根据需要切换不同的皮肤样式，id为"skin"方便后续通过JavaScript等方式动态切换皮肤 -->
|
|
|
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/skin/default/skin.css" id="skin" />
|
|
|
<!-- 引入H-ui.admin框架的额外样式表文件，可能包含一些自定义的样式规则，用于进一步调整页面的外观显示 -->
|
|
|
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/style.css" />
|
|
|
<!-- 条件注释，当浏览器版本为IE6时，引入DD_belatedPNG_0.0.8a-min.js脚本文件，并执行相关函数来修复IE6下的PNG图片透明等显示问题 -->
|
|
|
<if IE 6>
|
|
|
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
|
|
|
<script>DD_belatedPNG.fix('*');</script>
|
|
|
<![endif]>
|
|
|
<!--/meta 作为公共模版分离出去-->
|
|
|
<title>确认订票信息</title>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<!-- 使用article标签定义一个页面区域，通常用于表示独立的、自包含的内容块，这里作为整个订票信息展示和确认的容器 -->
|
|
|
<article class="page-container">
|
|
|
<!-- 创建一个表单（form），用于提交订票相关信息，action属性指定了表单提交的目标地址（这里是BookingServlet），method属性设置为"post"表示以POST方式提交数据 -->
|
|
|
<form action="<%=basePath%>BookingServlet" method="post" class="form form-horizontal" id="form-member-add">
|
|
|
<!-- 创建一个行（row）容器，用于布局内部的标签和表单控件，cl类可能是用于设置一些列相关的样式规则（可能是基于框架自定义的类名） -->
|
|
|
<div class="row cl">
|
|
|
<!-- 创建一个表单标签（label），用于显示提示文本，col-xs-4 col-sm-3类表示在不同屏幕尺寸下（超小屏幕xs和小屏幕sm）该标签所占的列数，这里用于控制布局位置 -->
|
|
|
<label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span></label>
|
|
|
<!-- 创建一个表单控件所在的容器，同样通过类名控制在不同屏幕尺寸下的宽度等布局样式，这里设置了宽度为300px -->
|
|
|
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
|
|
|
<!-- 显示一个一级标题（h1），内容为"订 票 信 息"，用于突出显示这部分是订票信息的展示区域 -->
|
|
|
<h1> 订 票 信 息 </h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row cl">
|
|
|
<label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span></label>
|
|
|
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
|
|
|
<!-- 显示一个三级标题（h3），颜色设置为红色，用于提示用户确认信息是否正确 -->
|
|
|
<h3 style="color: red;">请确认信息是否正确！</h3>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 创建一个隐藏的输入框（input），用于传递列车的ID信息，其值通过JSTL表达式（${train.trainId}）从后台传递过来的数据中获取，在表单提交时会将该值一起发送到服务器端 -->
|
|
|
<input type="hidden" name="trainId" value="${train.trainId}">
|
|
|
<div class="row cl">
|
|
|
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>姓名：</label>
|
|
|
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
|
|
|
<!-- 创建一个文本输入框，设置为禁用状态（disabled="disabled"），意味着用户不能修改该输入框中的内容，其值通过JSTL表达式（${pmember.realName}）从后台获取并显示，同时设置了占位符（placeholder）为空 -->
|
|
|
<input type="text" disabled="disabled" class="input-text" value="${pmember.realName}" placeholder="" id="realName" name="realName">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row cl">
|
|
|
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
|
|
|
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
|
|
|
<input type="text" disabled="disabled" class="input-text" value="${pmember.sex}" placeholder="" id="sex" name="sex">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row cl">
|
|
|
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>年龄：</label>
|
|
|
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
|
|
|
<input type="text" disabled="disabled" class="input-text" value="${pmember.age}" placeholder="" id="age" name="age">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row cl">
|
|
|
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证号码：</label>
|
|
|
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
|
|
|
<input type="text" disabled="disabled" class="input-text" value="${pmember.idCard}" placeholder="" id="idCard" name="idCard">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row cl">
|
|
|
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车次：</label>
|
|
|
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
|
|
|
<input type="text" disabled="disabled" class="input-text" value="${train.trainNumber}" placeholder="" id="trainNumber" name="trainNumber">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row cl">
|
|
|
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>起始站：</label>
|
|
|
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
|
|
|
<input type="text" disabled="disabled" class="input-text" value="${train.startStation}" placeholder="" id="startStation" name="startStation">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row cl">
|
|
|
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>终点站：</label>
|
|
|
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
|
|
|
<input type="text" disabled="disabled" class="input-text" value="${train.endStation}" placeholder="" id="endStation" name="endStation">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row cl">
|
|
|
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>开车时间：</label>
|
|
|
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
|
|
|
<input type="text" disabled="disabled" class="input-text" value="${train.startTime}" placeholder="" id="startTime" name="startTime">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row cl">
|
|
|
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>到站时间：</label>
|
|
|
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
|
|
|
<input type="text" disabled="disabled" class="input-text" value="${train.endTime}" placeholder="" id="endTime" name="endTime">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row cl">
|
|
|
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车票价格：</label>
|
|
|
<div class="formControls col-xs-8 col-sm-9" style="width:300px;">
|
|
|
<input type="text" disabled="disabled" class="input-text" value="${train.price}" placeholder="" id="price" name="price">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row cl">
|
|
|
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
|
|
|
<!-- 创建一个提交按钮（input），类型为submit，按钮文本为"确认"，点击该按钮会触发表单提交操作，将表单中的数据发送到指定的BookingServlet进行处理 -->
|
|
|
<input class="btn btn-primary radius" type="submit" value=" 确认 ">
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
</article>
|
|
|
|
|
|
<!--_footer 作为公共模版分离出去-->
|
|
|
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
|
|
|
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
|
|
|
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
|
|
|
|
|
|
<!--请在下方写此页面业务相关的脚本，这里预留了位置方便添加与该页面特定业务逻辑相关的JavaScript代码，比如表单验证、数据处理等功能的代码 -->
|
|
|
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
|
|
|
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
|
|
|
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
|
|
|
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
|
|
|
|
|
|
<!--/请在上方写此页面业务相关的脚本-->
|
|
|
</body>
|
|
|
|
|
|
</html> |
