您的位置：首页 > Web前端 > JQuery

jQuery+css+js+html5实现订座功能（仿电影票订座和火车票订座功能）

2017-08-21 13:50 579 查看
本篇博客实现了仿照火车订票功能，实现了一人对应了一个座位的功能。由于本人不擅长写前端，所以看起来不太好看，欢迎前端大神的指正。在实现这些功能以前也去网上搜了很多然后都没有找到自己可以用的模板，于是自己通过各种集成实现了以下这些功能，该功能都是自主实现，主要功能不多，分为以下几个功能：

1、登录

2、选择操作对象

3、选择操作

4、选座位

5、查询已选择信息

下面放一些该项目实现的截图：







选择以后再去该桌会显示已经选过的座位不能再进行操作。



先引入以下jar包，前端运用了一些框架：



由于本人不擅长写前端，所以前端代码不是很好看，请见谅！

下面介绍实现：

登录界面的HTML5

<body class="body">
<div >
<div class="title">登 录 系 统</div>
<br/>
<input type="text" name="username"  placeholder="请 输 入 账 号" id="box-name" class="txt"  onfocus="this.value=''" />
<br>
<input type="password" name="password" placeholder="请 输 入 密 码" id="box-pass" class="txt" onfocus="this.value=''"/>
<br>
<input id="buttonid" type="submit" value="登  录" class="btn" onmouseover="this.style.backgroundColor='#FF8D00'" onmouseout="this.style.backgroundColor='#FC5628'">
<br>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/***.js"></script> //引入登录判断的js
</body>
</html>


前端登录的js代码,在前端判断用户名是否为空，后端实现判断：

$("#buttonid").click(function(){
var username=$("#box-name").val();//获取用户名
var password=$("#box-pass").val();//获取密码
if(username==""||password=="")
{
alert("用户名密码不能为空！");
}
else
{
$.ajax({
type:'post', //提交的方式为post
url:"url",//要请求的url
dataType:"json",//返回的数据格式是json
data:{   //data是上传到后台的数据
username:username,
password:password,
},
success: function(dataa)//dataa是后台返回来的数据
{
if(dataa.ack=="error")
alert("用户名密码不正确，请重新输入！");
else if(dataa.ack=="ok")
window.location.href="要跳转的界面";
},
error: function()
{
alert("用户名密码错误");
},
});
}
});


在Java后台里面判断用户登录的信息是否有效，如果有效，返回json数据ACK：OK，否则返回error,在前端js里面判断，如果OK就登陆到下一个页面，否则提示用户名密码错误。

选择桌子信息：

<body class="body">
</div>
<center>  <span class="text">请选择你要选择的桌号</span></center>
<div id="content" >
<button id="button" class="text button" name="table1">1</button>
<button id="button" class="text  button" name="table2">2</button>
<button id="button" class="text button" name="table3">3</button>
<button id="button" class="text button" name="table4">4</button>
<br />
<button id="button" class="text button" name="table5">5</button>
<button id="button" class="text button"  name="table6">6</button>
<button id="button" class="text button" name="table7">7</button>
<button id="button" class="text button" name="table8">8</button>
<br />
<button id="button" class="text button" name="table9">9</button>
<button id="button" class="text button" name="table10">10</button>
<button id="button" class="text button" name="table11">11</button>
<button id="button" class="text button" name="table12" >12</button>
<br />
<button id="button" class="text button" name="table13">13</button>
<button id="button" class="text button" name="table14">14</button>
<button id="button" class="text button" name="table15">15</button>
<button id="button" class="text button" name="table16">16</button>
</div>
<div class="divstyle">
<input type="button" class="backbutton" id="back" value="上 一 步"></input>
</div>
<script src="js/***.js"></script>
</body>
</html>


每个button的ID是一样的，所以写了通用点击事件，每选择一个按钮会将按钮上的值传递给后台。

$("button").click(function(){
var value = $(this).text();//获取按钮上的值
console.log(value);
$.ajax({
type:'post',
url:url,
data:{
tableid: value,
},
dataType:'json',
success:function(result)
{
if(result.ACK =="ok")
{
alert("该桌剩下的座位"+result.***);
if(result.remainseat>0)
{
window.location.href="***.html";
}
else if(result.remainseat==0)
{
window.location.href="***.html";
}
}
//用户名失效
else if(result.ACK == "error")
{
alert("用户名已失效");
window.location.href="***.html";
}
},
error:function()
{
alert("加载错误！");
},
});
});


Java后台会将用户名是否已经失效的信息返回，如没有失效还将该桌子剩下的座位信息返回，如果剩下的座位为0就重新刷新该桌。

选择座位的页面：

<body>
<div align="center">
<button   id="button1"></button>
</div>
<div>
<input type="checkbox" id ="1" class="seat1"  value = "1" name="seat1" />
<input type="checkbox" id ="2" class="seat2"  value = "2" name="seat2" />
<input type="checkbox" id ="3" class="seat3"  value = "3" name= "seat3">
<input type="checkbox" id ="4" class="seat4"  value = "4" name = "seat4">
<input type="checkbox" id ="5" class="seat5"  value = "5" name = "seat5">
<input type="checkbox" id ="6" class="seat6"  value = "6" name ="seat6">
<input type="checkbox" id ="7" class="seat7"  value = "7" name = "seat7">
<input type="checkbox" id ="8" class="seat8"  value = "8" name="seat8">
<input type="checkbox" id ="9" class="seat9"  value = "9" name="seat9">
<input type="checkbox" id ="10" class="seat10" value = "10" name="seat10">

</div>
<div class="divstyle">
<button type="submit" id="***" class="button"> 提  交</button>
<br />
<br />
<button type="submit" class="button" id="back">上 一 步</button>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/***.js"></script>
</body>
</html>


选择座位的js,首先初始化页面，若查到页面的座位已经被选择过，那个禁用该座位。这是初始化座位信息的时候后台返回的数据：



$(document).ready(function(e){
$.ajax({
type:'post',
url:"*****",
dataType:'json',
success : function(result)
{
if(result.ACK=="ok")
{
if(result.seat1=="1")
document.getElementById(1).disabled=true;
if(result.seat2=="1")
document.getElementById(2).disabled=true;
if(result.seat3=="1")
document.getElementById(3).disabled=true;
if(result.seat4=="1")
document.getElementById(4).disabled=true;
if(result.seat5=="1")
document.getElementById(5).disabled=true;
if(result.seat6=="1")
document.getElementById(6).disabled=true;
if(result.seat7=="1")
document.getElementById(7).disabled=true;
if(result.seat8=="1")
document.getElementById(8).disabled=true;
if(result.seat9=="1")
document.getElementById(9).disabled=true;
if(result.seat10=="1")
document.getElementById(10).disabled=true;
}
else if (result.ACK=="error")
{
alert("用户名已失效");
window.location.href="login.html";
}
},
error : function()
{
alert("加载错误！");
},
});
//获取页面被选择的座位
$("#****").click(function(){
var selected = new Array();
for(var i=1;i<11;i++)
{
if(document.getElementById(i).checked)
{
selected[i-1] = "1";
}
else if(document.getElementById(i).checked==false)
{
selected[i-1] = "0";
}
}
console.log(selected);
$.ajax({
type:'post',
url:"****",//url
traditional:true,//上传数组要加上去
data:
{
selected:selected,
},
success : function(result)
{
var obj = eval('('+result+')');
if(obj.ACK == "ok")
{
if(obj.selectStatus == "ok")
{
alert("****");
window.location.href="***.html";
}
else if(obj.selectStatus == "error")
{
window.location.href="***.html"
}
}
else if(obj.ACK == "error")
{
alert("用户名已失效");
window.location.href="***.html";
}
},
error:function()
{
alert(弹出的信息);
},
});
});
$("#back").click(function(){
window.location.href="***.html";
});
})


查询界面的JS代码：

$.ajax({
type:'post',
url:"****",
dataType:"json",//设置返回数据类型为json
success:function(result)
{
if(result.ACK=="ok")
{
if(result.count>0)
{
console.log("***"+result.***);
$("***").html(result.***);
$("****").html(result.***);
$("***").html(result.***);
$("***").html(result.***);
}
else if(result.***==0)
{
alert("您当前还没有选座");
window.location.href="****.html";
}
}
else if(result.ACK=="error")
{
alert("用户名密码已过期");
window.location.href="****.html";
}
}

});


Java后台实现，选择座位的Java程序，通过事务的方式对数据库进行操作，这样子避免了多人操作出现错误的信息。我不是一个写前端的介绍的都是写前端的知识，因为后台代码也没什么用。而且新写前端的我感觉很多地方都难以实现，所以我就简单的写一下前端的实现。后台的逻辑理清楚就很好实现的。

最后在说一个前端样式：

设置圆角：border-radius: Xpx;

下面列举一些我实现这些功能参考的博客以及网络资源。

[1]http://www.cnblogs.com/Sea1ee/p/6204596.html

网上之前参考的一篇文章实现订座功能，但是无奈没有用上

[2]https://www.helloweba.com/demo/seat/seat.html

[3]https://www.helloweba.com/view-blog-278.html

java事务可以参考以下：

[4]http://www.cnblogs.com/chengpeng15/p/5802930.html

[5]http://blog.csdn.net/sinat_33536912/article/details/51200630

最后如果有问题欢迎加QQ群：425783133（非广告群，非诚勿扰！）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery css
相关文章推荐
新的分享
章节导航