因為接下來估計會花一個半月的時間講解乙級術科的題目,所以老師說要利用兩三天的時間快速的帶過Jquery及Ajax,然後再看術科講解的狀況來決定要不要多講一些其它的技術內容。
今天先是教大家如何下載Jquery及匯入到網頁中,接著是講解JSON這個資料傳格式;
基本格式為 – {var1:value,var2:value};
陣列格式為 – {var1:[value1,value2,value3,value4,……]};
可以混合使用 – {var1:value,var2:value,var3:[value1,value2,value3,value4,……]};
如果外部變數己經被指定某值時,可以只放變數 :
var a=111;
var b=”john”;
此時json格式可以只放變數即可 – {a,b};
eval(“str”) – 用來”執行”字串中的運算式,在老師的範例中是拿來解析JSON格式,把json變成陣列來使用
比如 open_json={a01:1111,b02:’aaaa’};
open_json_1=eval(“(“+open_json+”)”);
open_json_1.a01 => 1111;
再來是講解Jquery的傳值方式,這部份就有點神奇了,我想大家多少都卡了一下,需要點時間消化;
$.post(傳送對象,傳送內容,回傳值);
其中,回傳值通常會是傳送對象處理完的結果,而傳送對像通常會是一個PHP之類的檔案,可以用來接收及處理傳送內容,具體的範例程式如下:
$.post("ajax_test.php" , {name,password} , function(ajax_result){ document.getElementById('block').innerHTML=ajax_result; });
第三個參數通常使用匿名函式來處理,也有人叫”閉包”,這個做法是為了可以在取得回傳值後,針對回傳值再做處理。
中午時間班導請大家吃PIZZA,同時辦了一個0元交換禮物趴。

聖誔PIZZA及交換禮物趴
下午老師先要大家利用以前的一個games資料表來複習一下sql及php,先把資料都顯示在網頁上,但是不加上<form></form>

利用舊資料表把資料顯示出來
接著是增加一個onchange時要執行函式pizza() (因為剛吃完pizza),這是用來當任何一個欄位的內容有改變時要進行的動作,這裏老師花了不少時間帶大家利用alert()來確認函式的執行;
接著是在每個<input>欄位裏加上onchange事件及函式,這裏會需要帶入PHP語法把資料庫select出來的資料流水號當成參數帶入pizza函式中;
比如:onchange=”pizza(1,<?php echo $row[‘g_no’] ;?>)”
然後是把欄位的ID格式做修改,以欄位代號加上資料序號來組成一個獨有的ID,以利後續程式取用;
比如:id=”g_1_<?php echo $row[‘g_no’] ;?>”
最後是JS函式的本體,這裏需要先確認有在檔案中匯入Jquery函式庫,然後在函式中帶入Jquery語法:
HTML及PHP的部份如下:
重頭戲在ajtest.php這個檔案,當我們在任何一個欄位進行修改後,pizza()函式會取得欄位的代碼,欄位的id及欄位被修改後的值,並將這個三個值以POST的方式傳送給ajtest.php這個檔案,
所以接下來就是要在ajtest.php中接收值,並處理,我們要處理的事情就把變動後的值UPDATE進資料庫中,這樣就完成了即時的資料更新,同時又不需要重新載入一次原本的頁面。
在課堂中,後來發現input 中的value值在取得後都是字串型態,這部份在驗證上要另外處理,我後來找到了ctype_digit()這個函式來處理,其它的處理方式可以使用正規表示式,或是把字串當成陣列,一個字元一個字元檢測,只要偵測到不是數字的,就顯示不符合,提供參考程式片段如下:
留言