图书馆占座系统（七）

第一次更新（2018.8.19 19：50）

嗯，好久没更新了，是因为做项目做兴奋了，图书馆占座系统已经开发完了，另外我又开发了其他两个系统，这个另说。

上一章讲到cookie，登录过去的界面判断cookie是否存在后，存在即进行操作，不存在就跳转到登录页面，前面已经讲过我们可以读取数据库中的座位号在网页加载后实时显示出来已经被占的座位，现在我们需要占座以及取消座位，当点击一个座位时，系统判断这个座位是否被占，如果被占提醒，否则开始查询用户是否存在占座，如果不存在占座就把座位号写入数据库，如果存在就提示存在，取消后再占。
以下是代码：
点击座位时：

    $(function() {
    $(".img").click(function() {
        var seat_num = $(this).attr("name");
        element = document.getElementsByName(seat_num);
        if (element[0].src.match("no")) {
            var ggg = boom(seat_num);
            if (ggg == 0) {
                alert('此座位未占');
                if (confirm('此座位未占,是否需要占座？')) {
                    element[0].src = "yes.png";
                    changeee(seat_num)
                }
            } else {
                alert('你已经占坐座位了，请取消后再占')
            }
        } else if (element[0].src.match('yes')) {
            abc = cba(seat_num);
            if (abc == 1) {
                if (confirm('是否取消占座？(点击确定取消占座)')) {
                    abc = cba(seat_num);
                    qqq = zzz();
                    if (qqq == 1) {
                        alert('取消成功');
                        element[0].src = "no.png"
                    } else {
                        alert(qqq);
                        alert('取消失败')
                    }
                }
            } else {
                alert('这个座位有人了，请取消您自己的座位')
            }
        }
    })
})

这段代码的意思是
先获取当前点击对象的name，在获取这个点击对象的src中是否含有no或者yes，（no是没有占座。yes是占座），当检查到这个座位有人占了，则执行一个查询函数，查询这个座位是否是自己的座位，
js代码如下
：

else if(element[0].src.match('yes')){

                                            abc =cba(seat_num);
                                            if (abc==1)//是自己的座位
                                                {

                                            if(confirm('是否取消占座？(点击确定取消占座)')){

                                                abc=cba(seat_num);//判断当前点击座位是否为自己的座位



                                                qqq=zzz();//调用设置座位为空函数即取消占座
                                                if(qqq==1){
                                                    alert ('取消成功');
                                                element[0].src="no.png";
                                                }
                                                else{
                                            alert(qqq);
                                            alert('取消失败');
                                        }
                                                //cheak(flag1);//调用取消函数，并写入数据库
                                                }
                                                }
                                    else{
                                            alert('这个座位有人了，请取消您自己的座位');
                                    }

                                                //


                                    }

如果是yes，则运行cba（）这个函数，并把当前座位值传给这个函数，并将返回值赋给abc（原谅我的命名）；
以下是该函数：

$function cba(seat_num){
            var flag11=null;

            if (window.XMLHttpRequest){
                                                    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                    xmlhttp=new XMLHttpRequest();
                    }   
                    else {
                                                    // IE6, IE5 浏览器执行代码
                            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                         }

                xmlhttp.onreadystatechange=function(){//onreadystatechange此函数意思为当服务器响应
                                                //已经做好被处理的准备是做出的响应
                        if (xmlhttp.readyState==4 && xmlhttp.status==200){//readystate的值为4或status为200时代表服务器可以与之通信

                            flag11=xmlhttp.responseText;

                        }}
            xmlhttp.open("GET","一楼6.php?seat_num="+seat_num,false);
                    xmlhttp.send();//请求方式为post才有用
                    return flag11;

这是一个ajax函数，我们通过ajax函数将座位号传入php文件，并将返回值赋给flag11
以下是php代码

$show_seat=$_GET['seat_num'];

$name=$_COOKIE["name"];//取出name的cookie值



$sql = "select seat from ceshi.ceshi1  where name='$name'";



$obj = mysql_query($sql);
$rows = mysql_fetch_row($obj);//返回结果，当前座位号被存在了$rows[0]中；
if($rows[0]==$show_seat){
    echo 1;
}
else{
    echo 0;
}

首先获取座位号和当前用户名，然后查询当前用户名下的座位表中的座位号，如果传入的座位号和当前座位号相等，则返回1，否则返回0；
现在来看js代码
当返回值是1的时候，也就证明这个点击座位是当前的用户所占的座位，则调用zzz（）函数，并把得到的返回值赋给qqq，
以下是zzz（）的函数，

function zzz() {

    var qqq = null; //必须在外面先声明！
    if (window.XMLHttpRequest) {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp = new XMLHttpRequest();
    } else {
        // IE6, IE5 浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() { //onreadystatechange此函数意思为当服务器响应
        //已经做好被处理的准备是做出的响应
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //readystate的值为4或status为200时代表服务器可以与之通信
            qqq = xmlhttp.responseText;
            console.log(qqq);
        }

    }
    xmlhttp.open("GET", "一楼5.php", false);
    xmlhttp.send(); //请求方式为post才有用
    return qqq; //return一定要写在这，并且需要在调用函数下声明！

}

我们通过ajax直接调用php文件。将返回值赋给qqq，并把qqq返回给原函数
以下是php代码

$name=$_COOKIE["name"];//取出name的cookie值


$sql = "update ceshi.ceshi1 SET seat='null' where name = '$name'";


$obj = mysql_query($sql);




if ($obj&&mysql_affected_rows($link))//判断是否执行sql语句和判断是否对数据库执行操作       
{
    echo 1;

}else
{
    echo 0;
}

先用cokie获得当前的用户名，然后修改当前用户名下的座位号为null，这里不能用delete，因为delete是删除整条记录，而不能仅仅删除一个记录，然后判断操作是否成功，若成功返回1，否则返回0

再来看html代码
如果是1，则提示取消成功，如果是0提示取消失败，
当cba函数返回值是0，即当前用户并不是此座位的占有者提示、”这个座位有人了，请值您自己的座位”

下面来讲当点击的是没人占的座位时，
先判断所在用户是否存在已占座位，运行boom函数并传入座位号，将返回值赋给ggg；一下是代码

function boom(seat) {

    var fff = null; //必须在外面先声明！
    if (window.XMLHttpRequest) {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp = new XMLHttpRequest();
    } else {
        // IE6, IE5 浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() { //onreadystatechange此函数意思为当服务器响应
        //已经做好被处理的准备是做出的响应
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //readystate的值为4或status为200时代表服务器可以与之通信
            fff = xmlhttp.responseText;
            alert(fff);
        }

    }
    xmlhttp.open("GET", "一楼4.php?seat=" + seat, false);
    xmlhttp.send(); //请求方式为post才有用
    return fff; //return一定要写在这，并且需要在调用函数下声明！
}

我们把座位号传入php文件
以下是PHP代码

$seat=$_GET['seat'];

$name=$_COOKIE["name"];//取出name的cookie值

$sql = "select seat from ceshi.ceshi1  where name= '$name'";//判断当前用户名seat下是否有值，



$obj = mysql_query($sql);//在执行成功时返回true，出错返回false
//echo $obj;
$rows = mysql_fetch_row($obj);//返回一个数组，数组的值为查询到的，先把sql语句扔进sql软件，软件的出的结果就是这个row的遏制
//echo $rows[0];


if ($rows[0]=='null')//当返回的值不为null，即有座位，返回有座位标识
{   

    echo  0;
}
else{
    echo $rows[0];
    echo 1;
}

首先获得座位号和当前用户名；在查找当前用户名下的座位值，如果是null代表没有座位，返回0，如果有返回当前当前的座位值，js函数拿到返回值后将此值返回给主函数，如果返回的是0，代表该用户没有占座，则执行changeee函数
执行changeee函数
下面是这个函数的代码

                function changeee(seat_num){

                    if (window.XMLHttpRequest){
                                                    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                    xmlhttp=new XMLHttpRequest();
                    }   
                    else {
                                                    // IE6, IE5 浏览器执行代码
                            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                         }

                xmlhttp.onreadystatechange=function(){//onreadystatechange此函数意思为当服务器响应
                                                //已经做好被处理的准备是做出的响应
                        if (xmlhttp.readyState==4 && xmlhttp.status==200){//readystate的值为4或status为200时代表服务器可以与之通信

                    xmlhttp.open("GET","一楼.php?seat_num="+seat_num,false);
                    xmlhttp.send();//请求方式为post才有用

            }

将座位号传入php，
php代码如下

$name=$_COOKIE["name"];//取出name的cookie值
$seat=$_GET['seat_num'];
//确认座位//
$sql = "update ceshi.ceshi1 set seat='$seat' where name='$name'";

获取当前用户名字和座位号，并将座位号写入数据库。然后在主函数内将图标颜色改变，
那么至此，图书馆占座系统的基本操作就完成了。