车位预定查询html格式,H5停车场预订位置(电影院选座)前端后端-CSDN博客

其实我最怕的是写这种界面，只要界面有了，后端很轻松。。。。。虚晃了一波。。。

他这个demo大家可以去下载。。。

我这里记录后端。。。。

几个数据分析一下，

首先是这个座位图，他有个参数是map，

其次是电影票价格，参数 price，

最后就是已售出的座位标记，参数sc.get().status('unavailable');

map: [ //座位图

'aaaaaaaaaa',

'__________',

'aaaaaaaa__',

'aaaaaaaaaa',

'aa__aa__aa'

//已售出的座位

sc.get(['1_2', '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable');价格直接赋值。。

我们需要从服务器获取这三个参数，用来生成选座界面，当我们选中预定一个座位后，我们向数据库中更新一下不可利用的座位号，追加数据例如 ,5_1就是这样。

我们看一下数据库里存储格式，

座位数据字段map

aaaaaaaaaa,aaaaaaaaaa,__________,aaaaaaaa__,aaaaaaaaaa,aaaaaaaaaa,aaaaaaaaaa,aaaaaaaaaa,aaaaaaaaaa,aa__aa__aa

不可利用座位字段unable

5_10,4_8,4_7,4_6,5_6,6_5,7_3,4_2,8_6,5_3,1_1,10_1,6_1,5_1,10_10,7_7,8_4,8_2,8_8

价格字段price

5前端获取数据库数据进行处理。。。

js脚本跟php交互

mysql省略，直接从get获取数据

var price = $("#d1_price").val(); //订价

$(document).ready(function() {

var $cart = $('#selected-seats'), //车位区

$total = $('#total'); //总计金额

var flag=1;//控制只能选择一个车位

var row=0;//post排

var label=0;//post列

var maparray=$("#c1_map").val().split(",");//数据分割

var sc = $('#seat-map').seatCharts({

map: maparray,//座位图

naming : {

top : false,

getLabel : function (character, row, column) {

return column;

}

legend : { //定义图例

node : $('#legend'),

items : [

[ 'a', 'available', '可选车位' ],

[ 'a', 'unavailable', '已售出']

]

click: function () { //点击事件

if (this.status() == 'available'&&flag==1) { //可选车位

$('

'+(this.settings.row+1)+'排'+this.settings.label+'位')

.attr('id', 'cart-item-'+this.settings.id)

.data('seatId', this.settings.id)

.appendTo($cart);

row=this.settings.row+1;

label=this.settings.label;

$total.text(recalculateTotal(sc)+price);

flag=0;

return 'selected';

} else if (this.status() == 'selected'&&flag==0) { //已选中

//更新数量

//$counter.text(sc.find('selected').length-1);

//更新总计

$total.text(recalculateTotal(sc)-price);

//删除已预订车位

$('#cart-item-'+this.settings.id).remove();

//可选车位

flag=1;

return 'available';

} else if (this.status() == 'unavailable') { //已售出

alert("该车位已售出，请重新选择");

return 'unavailable';

} else if (flag==0){

alert("您已经选择了一个车位,需要重新选择请先取消当前选择");

return 'available';

}else {

return this.style();

}

});

//已售出的车位

var unablearray=$("#e1_unable").val().split(","); //数据分割

sc.get(unablearray).status('unavailable');

function send(){

$.ajax({

type:"POST",

url:"_post.php",

dataType:"json",

data:{

select: ","+row+"_"+label,

position: row+"排"+label+"位",

name: $("#a1_name").val(),

id: $("#b1_id").val()

success:function(data){

if(data.ok){

alert("预约成功"+data.msg);

window.setTimeout("location.href='null_success.php'", 100);

}else{

alert("预约失败,未知错误1");

}

error:function(jqXHR){

alert("预约失败,未知错误2");

}

});

}

$('#btn1').click(function () {

send();//下单

});

//计算总金额

function recalculateTotal(sc) {

var total = 0;

sc.find('selected').each(function () {

total += price;

});

return total;

}

这样就完美了，

效果图