大型运输行业实战_day07_1_订单查看实现

1.业务分析

每个在窗口售票的售票员都应该可以随时查看自己的售票信息

简单的界面入口如图所示:

对应的html代码:

对应的js函数:

function orderDetail(){
//进入订单明细页面
    window.location.href="http://localhost:8080/order/index";
}
对应的后端请求页面的控制层方法:

1   /**
2      * 获取订单页面
3      * @return
4      */
5     @RequestMapping("/index")
6     public String index() {
7         return "/WEB-INF/views/order.jsp";
8     }

2.  order.jsp 页面与js函数

  1 <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
  2 <html>
  3 <head>
  4     <title>订单明细</title>
  5     <script type="text/javascript" src="/static/jquery-2.1.3.min.js"></script>
  6     <script type="text/javascript">
  7        // alert($);
  8     </script>
  9 </head>
 10 <body>
 11 开始车站:<input id="startStation" type="text" value="" />  到
 12 到达车站:<input id="stopStation" type="text" value="" />
 13 <button onclick="query(5,1)">查询</button>
 14 <table id="orderList" width="50%" border="1" cellspacing="1">
 15 
 16 </table>
 17 
 18 <button onclick="firstPage()">首页</button>
 19 <button onclick="upPage()">上页</button>
 20 <button onclick="nextPage()">下页</button>
 21 <button onclick="lastPage()">末页</button>
 22 跳转到<input id="currentPage1" value="" size="1"/>页 <button onclick="jumpPage()">跳转</button>,
 23 每页显示<span id="pageSize">10</span>条,
 24 当前<span id="currentPage">5</span>/<span id="totalPage">10</span>页,
 25 总共<span id="count">48</span>条
 26 </body>
 27 <script type="text/javascript">
 28     //首页
 29     function firstPage(){
 30         alert("--firstPage--");
 31         //获取每页显示条数
 32         var _pageSize =  $("#pageSize").html();
 33         query(_pageSize,1);
 34     }
 35     //上页
 36     function upPage(){
 37         alert("--upPage--");
 38         var _pageSize =  $("#pageSize").html();
 39         //当前页
 40         var currentPage=$("#currentPage").html();
 41         var _currentPage=currentPage-1;
 42         query(_pageSize,_currentPage);
 43     }
 44     //下页
 45     function nextPage(){
 46         alert("--nextPage--");
 47         var _pageSize =  $("#pageSize").html();
 48         //当前页
 49         var currentPage=$("#currentPage").html();
 50         //var _currentPage=currentPage+1;//不能这样直接加必须使用函数
 51         var _currentPage= parseInt(currentPage)+1;
 52         query(_pageSize,_currentPage);
 53     }
 54     //末页
 55     function lastPage(){
 56         alert("--lastPage--");
 57         var _pageSize =  $("#pageSize").html();
 58         //当前页
 59         var _currentPage=$("#totalPage").html();
 60         query(_pageSize,_currentPage);
 61     }
 62     //跳转到
 63     function jumpPage(){
 64 
 65         alert("--jumpPage--");
 66         var _pageSize =  $("#pageSize").html();
 67         //当前页
 68         var _currentPage=$("#currentPage1").val();
 69         query(_pageSize,_currentPage);
 70     }
 71 
 72     function query(_pageSize,_currentPage){
 73         // alert("------query------");
 74         //1.获取参数
 75         var  startStation = $("#startStation").val();
 76         var  stopStation = $("#stopStation").val();
 77         //2.发送请求
 78         var params = {
 79             // startStation:startStation,
 80             stopStation:stopStation,
 81             _pageSize:_pageSize,//分页需要的数据
 82             _currentPage:_currentPage//分页需要的数据
 83         };
 84 
 85         if (null!=startStation && ''!=startStation){//开始车站有值的时候才传递参数
 86             params['startStation']=startStation;  //动态向json中添加参数
 87         }
 88 
 89         var url = 'http://localhost:8080/order/data';
 90         jQuery.ajax({
 91             type: 'POST',
 92             contentType: 'application/x-www-form-urlencoded',
 93             url: url,
 94             data: params,
 95             dataType: 'json',
 96             success: function (data) {
 97               var pageData =  data.data;
 98                 //取出列表
 99                 var orderList = pageData.list;
100                 //取出分页数据
101                 var currentPage= pageData.currentPage;
102                 var count= pageData.count;
103                 var pageSize= pageData.pageSize;
104                 var totalPage= pageData.totalPage;
105                 var html='<tr>'+
106                         '<td>编号</td>'+
107                         '<td>开始车站</td>'+
108                         '<td>到达车站</td>'+
109                         '<td>用户名</td>'+
110                         '</tr>';
111                 //解析数据到table表中
112                 for (var i=0;i<orderList.length;i++){
113                     //取出一个对象   java里面的内省机制
114                     var  ticket = orderList[i];
115                     var id = ticket.id;
116                     var startStation=  ticket.startStation;
117                     var stopStation=  ticket.stopStation;
118                     var userName=  ticket.userName;
119 
120                     html+='<tr>'+
121                             '<td>'+id+'</td>'+
122                             '<td>'+startStation+'</td>'+
123                             '<td>'+stopStation+'</td>'+
124                             '<td>'+userName+'</td>'+
125                             '</tr>';
126                 }
127                 //3.填充数据
128                 //填充列表
129                 $("#orderList").html(html);
130                 //填充分页数据
131                 $("#totalPage").html(totalPage);
132                 $("#pageSize").html(pageSize);
133                 $("#count").html(count);
134                 $("#currentPage").html(currentPage);
135             },
136             error: function (data) {
137                 alert("失败啦");
138             }
139         });
140     }
141 
142     query(5,1);
143 </script>
144 </html>

order.jsp