JavaWeb电影院订票系统(支持在线选座)

今天，博主开发一款电影院购票系统，说到影院购票系统，其与普通的商城系统的差别主要就是要进行座位选择，保证观众选取完该座位后会在订单在显示相应的信息，同时，选过的座位不能再选。
博主考虑一下，觉得座位选座可以通过JavaScript与JQuery等前端编程语言来实现，博主的前端技术不算太好，只能借用网上的js源码了。

展示视频

影院运行视频

功能点与技术点

前台：
用户注册登录，身份证实名(调用身份证识别接口，完成实名注册) 我的订单，收藏夹，影片评论，影片展示
后台：
影片管理（影片上传，下架) 影片类别管理，影片销售额统计（销售视图)，订单管理，用户管理 ,评论管理(发送邮件致谢)

数据采用ajax请求，json回传。

前端界面

那么有了前端的选座代码后，我们要做的便是将数据的选座信息绑定到页面上，即让这些亦轩的座位显示为不可选。这是博主的代码，数据绑定后并完成购票，使用的是AJAX请求。

<script type="text/javascript">
            var price =0;
            price=$("#price").text()*1;
            
      var sc="";
      var $cart='';
      var unseat="";
            $(document).ready(function() {
        $cart = $('#seats_chose'), //座位区
                        $tickects_num = $('#tickects_num'), //票数
                        $total_price = $('#total_price'); //票价总额

                 sc = $('#seat_area').seatCharts({
                    map: [//座位结构图 c 代表座位; 下划线 "_" 代表过道
                        'cccccccccc',
                        'cccccccccc',
                        '__________',
                        'cccccccc__',
                        'cccccccccc',
                        'cccccccccc',
                        'cccccccccc',
                        'cccccccccc',
                        'cccccccccc',
                        'cc__cc__cc'
                    ],
                    naming: {//设置行列等信息
                        top: false, //不显示顶部横坐标（行） 
                        getLabel: function(character, row, column) { //返回座位信息 
                            return column;
                        }
                    },
                    legend: {//定义图例
                        node: $('#legend'),
                        items: [
                            ['c', 'available', '可选座'],
                            ['c', 'unavailable', '已售出']
                        ]
                    },
                    click: function() {
                        if (this.status() == 'available') { //若为可选座状态，添加座位
                            $('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座  </li>')
                                    .attr('id', 'cart-item-' + this.settings.id)
                                    .data('seatId', this.settings.id)
                                    .appendTo($cart);
                          unseat=unseat+','+(this.settings.row + 1) + '_' + this.settings.label;

                            $tickects_num.text(sc.find('selected').length + 1); //统计选票数量
                            $total_price.text(getTotalPrice(sc) + price);//计算票价总金额

                            return 'selected';
                        } else if (this.status() == 'selected') { //若为选中状态

                            $tickects_num.text(sc.find('selected').length - 1);//更新票数量
                            $total_price.text(getTotalPrice(sc) - price);//更新票价总金额
                            $('#cart-item-' + this.settings.id).remove();//删除已预订座位

                            return 'available';
                        } else if (this.status() == 'unavailable') { //若为已售出状态
                            return 'unavailable';
                        } else {
                            return this.style();
                        }
                    }
                });
                //设置已售出的座位
                var a=document.getElementById("info").value;
                var ar=a.split(",");//里面不要加单引号，会变成["'1_3','2_5'"]
                unseat=ar;
               sc.get(ar).status('unavailable');//这是将座位设置为已用
                

            });

            function getTotalPrice(sc) { //计算票价总额
                var total = 0;
                sc.find('selected').each(function() {
                    total += price;
                });
                return total;
            }
      $("#btn1").click(function(sc){
        var money=$("#total_price").text();
        
                //alert("票价："+money);
        var seat=$("#seats_chose").text();
        
        var account=document.getElementById("account").value;
        var userid=document.getElementById("userid").value;
        var adress=document.getElementById("adress").value;
        var mid=document.getElementById("mid").value;
        var btime=document.getElementById("btime").value;
        account=account-money;
        if(userid!=0){
        if(account>=0){
          if(adress!=0){
            $.ajax({
              type:"post",
              url:"${basePath}/OrderServlet?action=buymovice&&account="+account+"&seat="+seat+"&unseat="+unseat+"&mid="+mid+"&money="+money,
              success:function(data){
                //调用填充数据的函数
                alert("下单成功!");
              },
              error:function(){
                alert("请求错误");
              }
              
            });
          
          }else{
            alert("购票前须先进行实名!");
          }
        }
        else{
          alert("余额不足!");
        }}
        else{
          alert("尚未登陆!");
        }
      });
        </script>

如此一来，购票选座功能便实现了。

下面是项目的运行展示截图：