You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
test1/ticketing-master/WebContent/pages/user/getByStartEndStation.jsp

176 lines
8.2 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- 指定JSP页面使用Java语言并设置页面的内容类型为html以及字符编码为UTF-8 -->
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!-- 引入JSTL核心标签库设置前缀为'c'以便在JSP页面中使用JSTL标签 -->
<%
// 获取请求的上下文路径,用于构建应用的根路径
String path = request.getContextPath();
// 构建基础路径,包含协议、服务器名称、端口号和上下文路径,用于后续资源的路径构建
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!-- JSP脚本片段用于动态生成basePath变量 -->
<!DOCTYPE html>
<!-- 文档类型声明指定了HTML的版本 -->
<html>
<!-- HTML文档的根元素开始 -->
<head>
<!-- head元素开始用于包含文档的元数据 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 指定页面的字符编码为UTF-8 -->
<title>根据起点站、终点站、出发时间查询展示车次信息</title>
<!-- 设置页面标题 -->
<script type="text/javascript" src="js/moment.js"></script>
<!-- 引入moment.js库用于日期时间操作 -->
<script type="text/javascript" src="js/getDate.js"></script>
<!-- 引入自定义的getDate.js脚本用于获取日期 -->
<!-- 以下是被注释掉的CSS样式链接 -->
<%-- <link rel="stylesheet" href="<%=basePath%>css/style.css" type="text/css" >
<link rel="stylesheet" href="<%=basePath%>css/table-style.css" type="text/css" > --%>
<!-- 引入select-style.css样式表用于美化select元素 -->
<link rel="stylesheet" href="<%=basePath%>css/select-style.css" type="text/css" >
<!-- 引入sumbitButton-style.css样式表用于美化提交按钮 -->
<link rel="stylesheet" href="<%=basePath%>css/sumbitButton-style.css" type="text/css" >
<!-- 引入H-ui前端框架的CSS文件 -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui/css/H-ui.min.css" />
<!-- 引入H-ui.admin前端框架的CSS文件 -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/H-ui.admin.css" />
<!-- 引入图标字体库 -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>lib/Hui-iconfont/1.0.8/iconfont.css" />
<!-- 引入皮肤样式 -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/skin/default/skin.css" id="skin" />
<!-- 引入自定义样式 -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/style.css" />
</head>
<!-- head元素结束 -->
<body onload="getDate()">
<!-- body元素开始包含页面的可见内容并在加载时执行getDate函数 -->
<br/><br/>
<!-- 表单用于提交查询请求 -->
<form action="<%=basePath%>GetByStartEndStationServlet" method="post">
<!-- 表单的action属性设置为服务器端的查询Servletmethod设置为post -->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
起始站:&nbsp;&nbsp;
<!-- 起始站下拉选择菜单 -->
<select name="startStation">
<!-- 使用JSTL的forEach标签遍历起始站列表 -->
<c:forEach items="${startStationList}" var="train">
<option value="${train.startStation}">${train.startStation}</option>
<!-- 为每个起始站创建一个选项 -->
</c:forEach>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
终点站:&nbsp;&nbsp;
<!-- 终点站下拉选择菜单 -->
<select name="endStation">
<!-- 使用JSTL的forEach标签遍历终点站列表 -->
<c:forEach items="${endStationList}" var="train">
<option value="${train.endStation}">${train.endStation}</option>
<!-- 为每个终点站创建一个选项 -->
</c:forEach>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
开车时间:&nbsp;&nbsp;
<!-- 开车时间输入框类型为date -->
<input type="date" id="startTime" id="startTime" name="startTime" min=""/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!-- 提交按钮使用sumbit-button样式 -->
<input class="sumbit-button" type="submit" value="查询">
</form>
<br/>
<!-- 表格用于展示查询结果 -->
<div class="page-container">
<div class="mt-20">
<!-- 表格开始 -->
<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
<thead>
<tr class="text-c">
<!-- 表头定义 -->
<th width="40">序号</th>
<th width="80">车次</th>
<th width="80">起始站</th>
<th width="80">终点站</th>
<th width="120">开车时间</th>
<th width="120">到站时间</th>
<th width="60">票价/元</th>
<th width="60">剩余座位数</th>
<th width="60">操作</th>
</tr>
</thead>
<tbody>
<!-- 使用JSTL的forEach标签遍历车次列表 -->
<c:forEach items="${trainList}" var="allTrain" varStatus="status">
<tr class="text-c">
<td>${status.index+1}</td>
<!-- 显示序号status.index+1用于计算当前序号 -->
<td>${allTrain.trainNumber}</td>
<!-- 显示车次号 -->
<td>${allTrain.startStation}</td>
<!-- 显示起始站 -->
<td>${allTrain.endStation}</td>
<!-- 显示终点站 -->
<td>${allTrain.startTime}</td>
<!-- 显示开车时间 -->
<td>${allTrain.endTime}</td>
<!-- 显示到站时间 -->
<td>${allTrain.price}</td>
<!-- 显示票价 -->
<td>${allTrain.seatNumber}</td>
<!-- 显示剩余座位数 -->
<td><a href="<%=basePath%>CheckLoginServlet?trainId=${allTrain.trainId}&temp=2">订票</a></td>
<!-- 订票操作链接 -->
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<!--_footer 作为公共模版分离出去-->
<!-- 引入jQuery库 -->
<script type="text/javascript" src="<%=basePath%>lib/jquery/1.9.1/jquery.min.js"></script>
<!-- 引入layer插件用于弹出层 -->
<script type="text/javascript" src="<%=basePath%>lib/layer/2.4/layer.js"></script>
<!-- 引入H-ui前端框架的JS文件 -->
<script type="text/javascript" src="<%=basePath%>static/h-ui/js/H-ui.min.js"></script>
<!-- 引入H-ui.admin前端框架的JS文件 -->
<script type="text/javascript" src="<%=basePath%>static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<!-- 引入My97DatePicker日期选择器 -->
<script type="text/javascript" src="<%=basePath%>lib/My97DatePicker/4.8/WdatePicker.js"></script>
<!-- 引入DataTables插件 -->
<script type="text/javascript" src="<%=basePath%>lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<!-- 引入laypage分页插件 -->
<script type="text/javascript" src="<%=basePath%>lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
<!-- 初始化DataTables插件 -->
$('.table-sort').dataTable({
"aaSorting": [[ 0, "asc" ]],//默认第几个排序