基于JAVAWEB实现电影院的购票选座功能（AJAX+JSON)

• 实体类

package com.pn.entity;

public class Ticket {
    /**
     * 座位号
     */
    private String seat;
    /**
     * 销售标志
     */
    private Integer sign;

    public void setSeat(String seat) {
        this.seat = seat;
    }

    public void setSign(Integer sign) {
        this.sign = sign;
    }

    public Integer getSign() {
        return sign;
    }

    public String getSeat() {
        return seat;
    }

    public Ticket() {
    }

    public Ticket(String seat, int sign) {
        this.seat = seat;
        this.sign = sign;
    }
}

• dao层接口，实现类

public interface TicketDao {
    /*查询所有售票信息*/
    public Map<String,Integer> findAllTicket();
    /*购票接口*/
    int buy(String[] seats);
    /*清场*/
    int clears();







}

package com.pn.dao.impl;

import com.pn.dao.TicketDao;
import com.pn.entity.Ticket;
import com.pn.utils.DBUtil;

import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class TicketDaoImpl implements TicketDao {
    @Override
    public Map<String,Integer> findAllTicket() {
        List<Ticket> ticketList = DBUtil.executeDQL(Ticket.class, "select * from t_ticket");
        /*将list转化为map*/
        Map<String,Integer> map = new HashMap<>();
        /*遍历list集合放入到Map集合中*/
        for (Ticket t:ticketList) {
            map.put(t.getSeat(),t.getSign());
        }
        return map;
    }

    @Override
    public int buy(String[] seats) {
        String str = Arrays.toString(seats);
        /*进行字符串拼接去掉str的[1，2，3，4，5] 拿取待【】里面的数据*/
        String sql ="update t_ticket set sign=1 where seat in("+str.substring(1,str.lastIndexOf("]"))+")";
        return DBUtil.executeDML(sql);
    }

    @Override
    public int clears() {
        return DBUtil.executeDML("update t_ticket set sign=0");
    }


}

注释：findAllTicket（）：这里使用Map集合是为了一个座位号对应一个票的状态，方便前端页面的操作，将查询到所有的list的集合遍历，将他的座位号和票的状态全部添加到map集合中，在前端用key来获取value的值

注释：buy（） ：这里使用Arrays工具类的toString方法是为了前端进行多选处理的时候，可以同时选中多个座位号进行提交。

Arrays.toString（array）返回的是一个字符串的形式,返回值是String

• 控制器

购票控制器

package com.pn.servlet;

import com.pn.dao.TicketDao;
import com.pn.dao.impl.TicketDaoImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/BuyServlet")
public class BuyServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        /*从页面获取数据购票需要进行点击购买*/
        /*在前端进行字符串拼接BuyServlet?seat=11&seat=23&seat=31*/
        String[] parameterValues = request.getParameterValues("seat");
        TicketDao ticketDao = new TicketDaoImpl();
        int buy = ticketDao.buy(parameterValues);
        if(buy>0){
            response.getWriter().print("ok");
        }else {
            response.getWriter().print("error");
        }


    }
}

清场控制器（重置）

package com.pn.servlet;

import com.pn.dao.TicketDao;
import com.pn.dao.impl.TicketDaoImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/ClearServlet")
public class ClearServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        TicketDao ticketDao = new TicketDaoImpl();
        int clears = ticketDao.clears();
        if(clears>0){
            resp.getWriter().print("ok");
        }else {
            resp.getWriter().print("error");
        }
    }
}

显示控制器

package com.pn.servlet;

import com.google.gson.Gson;
import com.pn.dao.TicketDao;
import com.pn.dao.impl.TicketDaoImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Map;

@WebServlet("/ShowServlet")
public class ShowServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        TicketDao ticketDao = new TicketDaoImpl();
        Map<String, Integer> map = ticketDao.findAllTicket();
        /*将数据放在req请求域中*/
        request.setAttribute("map",map);
        /*创建JSON对象*/
        Gson gson = new Gson();
        String json = gson.toJson(map);
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().print(json);

    }
}

注释：这里将接收的数据放在request的请求域中方便后面的接收（可以不要。应为json已经发送给前端接收了）。将创建的对象转化为字符串的形式

Gson = new Gson();
String str=gson.toJson(obj);//将json对象转化为字符串发送给前端
Object obj= gson.formJson(str);//将字符串转化为Json对象

• 前端页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var xmlhttp;

        function createXMLHttp() {
            if (window.ActiveXObject) {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } else {
                xmlhttp = new XMLHttpRequest();
            }
        }

        function getTickets() {
            createXMLHttp();
            xmlhttp.open("GET", "ShowServlet", true);
            xmlhttp.send();
            /*回调函数*/
            xmlhttp.onreadystatechange = callback;
        }

        function callback() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                /*获取数据,将字符串转化为对象*/
                var map = JSON.parse(xmlhttp.responseText);
                /*保存数据*/
                var html = "";
                for (var i = 1; i <= 5; i++) {
                    html += "<tr>";
                    html += "<td>" + i + "排</td>";
                    for (var j = 1; j <= 5; j++) {
                        /*访问JSON对象的数据时，如果属性名是数字，可以通过[]访问其值
                        * eg:var obj={
                        * "1":"张三"
                        * }
                        * 访问方式可以通过：obj["1"],而不能通过obj."1"来访问*/
                        if (map[i + "" + j] == 0) {/*0未售*/
                            html += "<td>" + j + "号座位未售<input type='checkbox' name='seats' value='" + i + j + "'></td>"
                        } else {

                            html += "<td style='background-color: red'>" + j + "号座位已售</td>"
                        }

                    }
                    html += "</tr>";
                }
                /*将数据显示到table标签中*/
                document.getElementById("data").innerHTML = html;
            }
        }

        function buy(){
            var param="";
            /*获取所有选项框的集合*/
            var seats=document.getElementsByName("seats");
            for(var i=0;i<seats.length;i++){
                if(seats[i].checked){
                    param+="seat="+seats[i].value+"&";
                }
            }
            xmlhttp.open("POST","BuyServlet",true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")
            xmlhttp.send(param);
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.responseText=="ok"){
                    getTickets();
                }
            };
        }
        function clear2(){
            xmlhttp.open("POST","ClearServlet",true);
            xmlhttp.send();
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.responseText=="ok"){
                    getTickets();
                }
            };
        }
    </script>
</head>
<body onload="getTickets()">
<table id="data" border="1"></table>
<input type="button" onclick="buy()" value="购买"><br>
<input type="button" onclick="clear2()" value="清场">
</body>
</html>

将票显示在页面：

前端思路：因为电影院的座位多少是固定的，以这个为例5行5列，使用双层for循环将数据显示到页面上。

注释：前端拿到数据要将其显示在页面上，先要将控制器（servlet服务器）里面的额数据拿到的数据用JSON解析为对象，进行table的拼接，这里的座位号可以用嵌套循环的i和j的字符串拼接进行显示。

0：未售 1：已售 ： 通过map集合的key来判断是否售票map[i+""+j]==0判断

注意：

/*访问JSON对象的数据时，如果属性名是数字，可以通过[]访问其值
* eg:var obj={
* "1":"张三"
* }
* 访问方式可以通过：obj["1"],而不能通过obj."1"来访问*/

购票：

购票的时候用checked来判断是否已选中的票，用这个：

/*获取所有选项框的集合*/
            var seats=document.getElementsByName("seats");

接收所有选中的集合，然后循环遍历判断集合中的下标是否属性是否为checked，将是checked的获取他座位号对应的值，进行”&“的拼接存储到param中用post请求发送到控制器，接收住进行处理

清场

用post请求直接发送到清除控制器，再次刷新页面