因為接下來估計會花一個半月的時間講解乙級術科的題目,所以老師說要利用兩三天的時間快速的帶過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()這個函式來處理,其它的處理方式可以使用正規表示式,或是把字串當成陣列,一個字元一個字元檢測,只要偵測到不是數字的,就顯示不符合,提供參考程式片段如下:

最後修改日期: 2018-11-24

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。