图书馆占座系统（一）

一、图书馆占座系统（1）

———-第一次更新（2018.08.03）

经过大概10天左右的时间，我把登录，注册这两个页面的前端和后端php代码写完了，这个以后详述。
现在我遇到的困境是，图书馆占座系统的一楼和相对应的php文件的数据传输，以下是代码

$(function(){
        $(".img").click(function(){
        var val = $ (this).attr("name");//获取当前点击的对象的name
        var seat_num=new Array();//创建一个新的名为seat_num的数组
        seat_num[0]=val;//把val赋值给seat_num的数组
        alert(seat_num[0]);
        window.location.href="一楼.php?name=seat_num[0]";
        })
            })

以上代码我想实现的功能是，获取点击对象的name，并传给一楼.php，具体作法是先获取对象的name，并将其值赋给val这个变量，再建立一个名为seat_num的数组，把令seat_num[0]=val，把val的参数传给数组,alert显示我所需要的值，代码直到这里一直都是我想要的效果，但是后面

window.location.href="一楼.php?name=seat_num[0]";

这句，无论怎么修改，php文件总显示为“seat_num[0]”这几个字符，并没有取得我想要的变量，
这我准备用 ？ 的方法来从一个html页面传输数据给php文件，但是现在看来行不通，
查询资料和请教别人得知，这样写传过去的不是参数，而是seat_num[0]这个字符串，需要通过序列化来解决这个问题……….

———-第二次更新（2018.08.03）
请教了一下别人，原来问题出在字符串的拼接上，
正确代码应该是

 window.location.href="一楼.php?name="+val

完整代码

$(function(){
        $(".img").click(function(){
        var val = $ (this).attr("name");//获取当前点击的对象的name
        alert(val);
         window.location.href="一楼.php?name="+val；
        })
            })

我把数组给删了，因为我最开始用数组的目的是以为不能读出字符串的原因是不支持字符串所以改用的数组
后来发现是拼接字符串的原因导致的错误后就没有必要用数组了。

———-第三次更新分割线（2018.08.03）
在写一楼所对应的php文件时，首先我要实现的功能是座位的写入数据库，
原来我用

insert into ceshi.ceshi1(seat) values($seat)

一直不成功，原来我应该用update修改命令而不是insert添加命令。

———-第四次更新分割线（2018.08.03）

写完了代码发现一直失败，这个时候就需要把sql、语句扔到sql管理软件去跑一下试试，结果我发现不成功，第一个bug是把update写成了updata（逃），结果发现还是报错，再次检查，发现是我没有更改传入的参数，仍然写成了$seat，改正过后，代码跑起来了，却发现所有的数据的seat都为我刚刚改的值这是由于没有指定一条数据来更改所在的seat，所以我加了一条代码，where Id=1;
以下是代码：

update ceshi.ceshi1 set seat='$seat' where Id=1

把这个代码写回php文件中，又因为引号不匹配的问题改了两次代码，最终效果良好，能起到我需要的效果

———-第五次更新（2018.8.4 0：53）

现在我需要做的是html数据和php数据的交互
基本方法是使用ajax异步传输

因为我所了解的ajax的基础语法是先建立函数在建立事件（然而事实证明这是错的，跟建立函数和事件一毛钱关系都没有），所以我把原本的代码注释掉了，以下是原来的代码：

$(function()//建立一个函数
          {
        $(".img").click(function(){//创造一个对于class为img的对象的一个点击函数
        var val = $ (this).attr("name");//获取当前点击对象的name
        window.location.href="一楼.php?name="+val;//传参
        })
            })

注释掉后我使用了新的办法
即先先点击再获取对象（愚蠢的错误）
错误代码如下：

var img = document.getElementsByClassName('img');
        for(var i=0;i<img.length;++i)
        {
        img[i].onclick=function(){
        if (window.XMLHttpRequest){
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
            }   
        else {
    // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                        }
        //function showHint(str){
xmlhttp.onreadystatechange=function()/*onreadystatechange此函数意思为当服务器响应
                            //已经做好被处理的准备是做出的响应
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)//readystate的值为4或status为200时代表服务器可以与之通信
        {
        var seat_num =$(this).attr("name");
        if(seat_num){
        alert("获取座位失败");
        }
        var flag1 = xmlhttp.responseText;
        alert(flag1);

        }
        }
xmlhttp.open("GET","一楼.php?seat_num="+seat_num,true);
xmlhttp.send();
                }
        }

错误的原因？
是在此函数下无法使用this函数（应该是这个错误），无法获得当前name值，

后来终于想明白函数里面可以嵌套函数，
所以我写出来了所需功能的代码
完整代码如下：

    $(function()//建立一个函数
          {
            $(".img").click(function(){//创造一个对于class为img的对象的一个点击函数
            var seat_num = $ (this).attr("name");//获取当前点击对象的name
                if (window.XMLHttpRequest){
                    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                    xmlhttp=new XMLHttpRequest();
                                            }   
                else {
                    // IE6, IE5 浏览器执行代码
                        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                //function showHint(str){
                xmlhttp.onreadystatechange=function()//onreadystatechange此函数意思为当服务器响应
                            //已经做好被处理的准备是做出的响应
                {
                 if (xmlhttp.readyState==4 && xmlhttp.status==200)//readystate的值为4或status为200时代表服务器可以与之通信
                        {
                            //var seat_num =$(this).attr("name");
                            //if(seat_num){
                                //alert("获取座位失败");

                        var flag1 = xmlhttp.responseText;
                        alert(flag1);

                        }
                }
                    xmlhttp.open("GET","一楼.php?seat_num="+seat_num,true);
                    xmlhttp.send();
                }
        )



                    //window.location.href="一楼.php?name="+val;//传参

                })

所需功能已经大体实现

———-第六次更新（2018.8.4 9：17）

一个很重要的知识点
如果在ajax运行时出现了xml语法错误
那么一定是php文件有错误
应该还回去找php文件的错误

———-第七次更新（2018.8.4 11：20）

我想实现的是从php返回一个flag代表已经占了位置，根据flag的值来改变占座的情况。

开始准备用遍历的方法来进行对图片的改变，

…………………………..等会再写吧
注意：

getElementsByName

中间的element有个s！！！！！！
还有name返回的是个数组，关于值的一个数组，
要取用他的值，必须通过element.属性来取用，直接element是取不到想要的值的