1.添加站间互售入口
对应的html代码
<button onclick="otherStation()">站间互售</button>
对应的js发送函数
function otherStation(){
//进入进入站间互售页面列表
window.location.href="/otherTicket/index";
}
对应的控制层代码:
1 /** 2 * 站间互售页面 3 * @return 4 */ 5 @RequestMapping("/index") 6 public String listPage() { 7 return "/WEB-INF/views/listOther.jsp"; 8 }
2.站间互售列表页面listOther.jsp代码
站间互售的页面与本站的页面完全一样,其实站间互售的本质与本站售票的逻辑几乎完全一样,唯一的不同是数据来源不同
1 <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %> 2 <html> 3 <head> 4 <title>车票列表</title> 5 <%--引入jquery--%> 6 <script type="text/javascript" src="/static/jquery-2.1.3.min.js"></script> 7 <script type="text/javascript" src="/static/My97DatePicker/WdatePicker.js"></script> 8 </head> 9 <body> 10 <br/> 11 <button onclick="loginout()">注销</button> 12 <button onclick="orderDetail()">订单明细</button> 13 <br/> 14 <br/> 15 <div align="center"> 16 开始车站:<input id="startStation" type="text" value="" /> 到 17 到达车站:<input id="stopStation" type="text" value="" /> 18 <br/> 19 开始时间:<input id="startTimeMin" onclick="WdatePicker()" value=""/> 20 结束时间:<input id="startTimeMax" onclick="WdatePicker()" value=""/> 21 <button onclick="query(5,1)">查询</button> 22 23 <table id="ticketList" width="50%" border="1" cellspacing="1"> 24 <tr> 25 <td>编号</td> 26 <td>开始车站</td> 27 <td>到达车站</td> 28 <td>操作</td> 29 </tr> 30 <%--模拟假数据--%> 31 <tr> 32 <td>1</td> 33 <td>北京</td> 34 <td>成都</td> 35 <td><button>购买</button></td> 36 </tr> 37 </table> 38 <button onclick="firstPage()">首页</button> 39 <button onclick="upPage()">上页</button> 40 <button onclick="nextPage()">下页</button> 41 <button onclick="lastPage()">末页</button> 42 跳转到<input id="currentPage1" value="" size="1"/>页 <button onclick="jumpPage()">跳转</button>, 43 每页显示<span id="pageSize">10</span>条, 44 当前<span id="currentPage">5</span>/<span id="totalPage">10</span>页, 45 总共<span id="count">48</span>条 46 </div> 47 </body> 48 <script type="text/javascript"> 49 50 51 function orderDetail(){ 52 //进入订单明细页面 53 window.location.href="/order/index"; 54 } 55 function loginout(){ 56 //进入注销处理控制层 57 window.location.href="/login/loginout"; 58 } 59 //首页 60 function firstPage(){ 61 alert("--firstPage--"); 62 //获取每页显示条数 63 var _pageSize = $("#pageSize").html(); 64 query(_pageSize,1); 65 } 66 //上页 67 function upPage(){ 68 alert("--upPage--"); 69 var _pageSize = $("#pageSize").html(); 70 //当前页 71 var currentPage=$("#currentPage").html(); 72 var _currentPage=currentPage-1; 73 query(_pageSize,_currentPage); 74 } 75 //下页 76 function nextPage(){ 77 alert("--nextPage--"); 78 var _pageSize = $("#pageSize").html(); 79 //当前页 80 var currentPage=$("#currentPage").html(); 81 //var _currentPage=currentPage+1;//不能这样直接加必须使用函数 82 var _currentPage= parseInt(currentPage)+1; 83 query(_pageSize,_currentPage); 84 } 85 //末页 86 function lastPage(){ 87 alert("--lastPage--"); 88 var _pageSize = $("#pageSize").html(); 89 //当前页 90 var _currentPage=$("#totalPage").html(); 91 query(_pageSize,_currentPage); 92 } 93 //跳转到 94 function jumpPage(){ 95 alert("--jumpPage--"); 96 var _pageSize = $("#pageSize").html(); 97 //当前页 98 var _currentPage=$("#currentPage1").val(); 99 query(_pageSize,_currentPage); 100 } 101 /** 102 * 注意在调用该函数时必须输入参数 103 * 查询+ 分页 104 * */ 105 function query(_pageSize,_currentPage){ 106 // alert("------query------"); 107 //1.获取参数 108 var startStation = $("#startStation").val(); 109 var stopStation = $("#stopStation").val(); 110 //查询时间范围获取 111 var startTimeMin = $("#startTimeMin").val(); 112 var startTimeMax = $("#startTimeMax").val(); 113 //2.发送请求 114 var params = { 115 // startStation:startStation, 116 stopStation:stopStation, 117 _pageSize:_pageSize,//分页需要的数据 118 _currentPage:_currentPage//分页需要的数据 119 }; 120 if (null!=startStation && ''!=startStation){//开始车站有值的时候才传递参数 121 params['startStation']=startStation; //动态向json中添加参数 122 } 123 if (null!=startTimeMin && ''!=startTimeMin){//最小时间 124 params['startTimeMin']=startTimeMin; 125 } 126 if (null!=startTimeMax && ''!=startTimeMax){//最大时间 127 params['startTimeMax']=startTimeMax; 128 } 129 var url = '/otherTicket/data'; 130 jQuery.ajax({ 131 type: 'POST', 132 contentType: 'application/x-www-form-urlencoded', 133 url: url, 134 data: params, 135 dataType: 'json', 136 success: function (data) { 137 //取出列表 138 var ticketList = data.list; 139 //取出分页数据 140 var currentPage= data.currentPage; 141 var count= data.count; 142 var pageSize= data.pageSize; 143 var totalPage= data.totalPage; 144 var html='<tr>'+ 145 '<td>编号</td>'+ 146 '<td>开始车站</td>'+ 147 '<td>到达车站</td>'+ 148 '<td>发车时间</td>'+ 149 '<td>余票数</td>'+ 150 '<td>线路类型</td>'+ 151 '<td>操作</td>'+ //添加购票按钮 152 '</tr>'; 153 //解析数据到table表中 154 for (var i=0;i<ticketList.length;i++){ 155 //取出一个对象 java里面的内省机制 156 var ticket = ticketList[i]; 157 var id = ticket.id; 158 var startStation= ticket.startStation; 159 var stopStation= ticket.stopStation; 160 //发车时间 161 var startTime = ticket.startTime; 162 var standby = ticket.standby; 163 var typeName = ticket.typeName; 164 html+='<tr>'+ 165 '<td>'+id+'</td>'+ 166 '<td>'+startStation+'</td>'+ 167 '<td>'+stopStation+'</td>'+ 168 '<td>'+startTime+'</td>'+ 169 '<td>'+standby+'</td>'+ 170 '<td>'+typeName+'</td>'+ 171 '<td><button onclick="buyTicket('+id+')">购买</button></td>'+ //添加购票按钮 172 '</tr>'; 173 } 174 //3.填充数据 175 //填充列表 176 $("#ticketList").html(html); 177 //填充分页数据 178 $("#totalPage").html(totalPage); 179 $("#pageSize").html(pageSize); 180 $("#count").html(count); 181 $("#currentPage").html(currentPage); 182 }, 183 error: function (data) { 184 alert("失败啦"); 185 } 186 }); 187 } 188 189 function buyTicket(id){ 190 alert("buyTicket----"+id); 191 //2.发送请求 192 var params = { 193 id:id 194 }; 195 var url = '/ticket2/buyTicket'; 196 jQuery.ajax({ 197 type: 'POST', 198 contentType: 'application/x-www-form-urlencoded', 199 url: url, 200 data: params, 201 dataType: 'json', 202 success: function (data) { 203 alert("成功"); 204 //刷新数据 205 query(5,1); 206 }, 207 error: function (data) { 208 alert("失败啦"); 209 } 210 }); 211 } 212 //执行js函数 213 query(5,1); 214 </script> 215 </html>