参考:https://blog.csdn.net/weixin_39919395/article/details/86289521
1、前台html,jquery,ajax
//(1)动态的创建一个table
function createShowingTable(data) {
var tableStr = "<table class='tab-list' width='99%'>";
tableStr = tableStr
+ "<tr class='list-header'>"
+"<td width='5%'>序号</td>"
+"<td width='15%'><input id='checkAll' name='checkAll' type='radio' /></td>"
+"<td width='20%'>座位行号</td>"
+"<td width='20%'>座位列号</td>"
+"<td width='20%'>订购状态</td>"
+"</tr>";
var len = data.length;
for ( var i = 0; i < len; i++) {
tableStr = tableStr + "<tr>"
+"<td>"+ (i+1) + "</td>"
+"<td id='checkOne1'><input class='checkOne' id='checkOne' name='checkOne' type='radio' value='"+data[i].seatId+"' /></td>"
+"<td>"+ (data[i].seatRowindex+1) + "</td>"
+ "<td>"+ (data[i].seatColsindex+1) + "</td>"
+ "<td>"+ (data[i].orderSeatStatus==0?'可预订':'不可预订') + "</td>"
+"</tr>";
}
/* if(len<=0){
tableStr = tableStr + "<tr style='text-align: center'>"
+"<td colspan='5'><font color='red'>"+暂无记录+"</font></td>"
+"</tr>";
}
*/
tableStr = tableStr + "</table>";
//添加到div中
$("#tableAjax").html(tableStr);
}
(2)ajax
//选择电影
function selectMovie() {
var select1 = $("option:selected").val();
var movieName=$("#movieOrder_scheduleObj_scheduleId").find("option:selected").text(); //获取Select选择的Text
var scheduleId = $("#movieOrder_scheduleObj_scheduleId").val();
alert("你选择的是:"+select1+",movieName:"+movieName);
$('#movieOrder_rowsIndex').val(null);//清空值
$('#movieOrder_cols').val(null);
$('#movieOrder_price').val(null);//清空价格
//根据 scheduleId获取 movieHallId
$.ajax({
url: basePath + "MovieOrder/getMovieHallId",
type: "get",
async: false,//同步
data:{
scheduleId:scheduleId
},
success : function(data) {
if(data.movieHallId!=null){
$("#movieHallId").val(data.movieHallId);//赋值
} else {
alert("数据为空!!!");
}
},
});
//初始化 影厅座位图表 绑定数据
$.ajax({
url: basePath + "MovieOrder/getMoviePrice",
type: "get",
async: false,//同步
data:{
movieName:movieName
},
success: function(movieList,response,status) {
$(movieList).each(function(i,movieList){
alert("movieList.price:"+movieList.price);
$('#movieOrder_price').val(movieList.price);//赋值价格
});
}
});
var movieHallId=$("#movieHallId").val();
alert("影厅id:"+movieHallId);
//创建表格
$.ajax({
url: basePath + "MovieOrder/seatOrderList",
type: "get",
async: false,//同步
data:{
movieHallId : movieHallId
},
success: function(seatOrderList,response,status) {
$("#tableAjax").empty();//创建表格前先清空
createShowingTable(seatOrderList);//动态创建表格
}
});
};
2、后台 springMVC
/*ajax方式查询座位显示可定的座位*/
@RequestMapping(value = { "/seatOrderList" }, method = {RequestMethod.GET,RequestMethod.POST})
public void seatOrderList(HttpServletResponse response,
@RequestParam(value="movieHallId",defaultValue="0",required=false)int movieHallId,
@RequestParam(value="seatId",defaultValue="0",required=false)int seatId,
@RequestParam(value="movieName",defaultValue="",required=false)String movieName,
String movieType,String director,String area,String releaseDate,Integer page,Integer rows, Model model, HttpServletRequest request) throws Exception {
List<SeatOrder> seatOrderList=seaOrderService.querySeatOrder(movieHallId,seatId);
response.setContentType("text/json;charset=UTF-8");
PrintWriter out = response.getWriter();
JSONArray jsonArray = new JSONArray();
for(SeatOrder seatOrder:seatOrderList) {
JSONObject jsonMovieOrder = new JSONObject();
jsonMovieOrder.accumulate("seatId", seatOrder.getSeatId());
jsonMovieOrder.accumulate("seatRowindex", seatOrder.getSeatRowindex());
jsonMovieOrder.accumulate("seatColsindex", seatOrder.getSeatColsindex());
jsonMovieOrder.accumulate("orderSeatStatus", seatOrder.getOrderSeatStatus());
jsonMovieOrder.accumulate("movieHallId", seatOrder.getMovieHallId());
jsonArray.put(jsonMovieOrder);
}
out.println(jsonArray.toString());
out.flush();
out.close();
}