圖書館佔座系統（一）

一、圖書館佔座系統（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是取不到想要的值的