Using AJAX in WP2.9 (with jQuery)
本篇文章要求讀者懂基本Javascript及明白AJAX概念, 並對Wordpress的template tags (hook & action 相關) 有基礎認識的初心者.
(要求似乎還真高@@”其實簡單來說, 是給學習Wordpress Plugin之類的初心者的)
這是一篇總結, 一篇整理, 一份食譜; 用來做甚麼, 這些創意留給滿腦主意的讀者了~^^”
以下將會以一個極簡單的例子作說明. 效果是動態載入最新的posts.
AJAX簡說
甚麼異步, XML, …….的我就不多說了, 大家可到以下的參考網址再深入了解~
參考網址:
- AJAX @ Wikipedia
- jQuery Documentation
- jQuery教學 @ jGears
- JSON
- Wordpress Template Tags
- Wordpress $wpdb
簡而言之, AJAX的真身可簡化成2段小程式碼: 一段在client side, 負責傳指令或資料到server side, 又或從server side接受資料. 另一段是在server side, 負責收到client side的要求後, 完成要求甚至回傳資料或把資料寫進資料庫…….
這樣便可以不用轉到其他頁面, 而可以跟server聯繫了.
然而, 在Wordpress中, 事情不是想像中簡單, 因為Wordpress的permalink structure的設定, request url並不那麼直觀, 而server side的程式碼又該放到哪裡也是個問題. 正因如此, 一輪找尋整理之下, 得出以下的結果~
但要留意的是, 我沒有去分辦究竟舊版本的Wordpress是否可行, 當然更沒有作出試驗啦~所以大家如果預到問題, 不妨提出讓大家一同討論XD”
Client Side
首要的當然要include jQuery的library啦~但WP2.9會自動載入的了, 所以大可無視~
也可考慮上行, 於activated theme的js資料夾內放入自己的jQuery library.
然後是本體, 還記得我想做的效果嗎? 動態載入最新的posts~
- <head>
- <script type="text/javascript">
- //<![CDATA[
- jQuery(document).ready(function($) {
- var data = {
- action: 'pp_get_newest_posts',
- dummy_data: 'you can pass any data you like with valid name (ie. only from a to Z, 0 to 9, and underscore _)',
- post_num: 6
- };
- $.post(
- '<?php echo admin_url('admin-ajax.php'); ?>',
- data,
- function(response) {
- $('#newest_posts').html(response);
- }
- );
- });
- //]]>
- </script>
- </head>
- <body>
- </body>
程式碼解說
data object內的action是必要的!!它指定了server side哪一個php function (當然是你自己寫的) 會被執行. 於後面server side的說明會再見到這個pp_get_newest_post的了.
data object是用JSON寫成的, 在此假設大家看得明白JSON表達式. 於data內的資料, 在server side內可以$_POST[]或$_GET[]取得 (當然要視乎你用的是POST method還是GET method).
$.post()是jQuery的AJAX function, 用的是POST method (好像說了廢話…), 如果想用GET method, 可用$.get(), 參數一樣.
$.post()的第三個參數是一個function, 用來處理傳回的結果. 結果會存到該function的第一個參數內 (response), 這個傳回結果可以是任何東西, eg. 純文字, HTML碼, JSON表達式, XML內容, Javascript程式碼, ……
Server Side
In somewhere……eg. functions.php @ activated theme:
- <?php
- add_action('wp_ajax_pp_get_newest_posts', 'the_newest_posts');
- add_action('wp_ajax_noprov_get_newest_posts', 'the_newest_posts');
- function the_newest_posts() {
- global $wpdb;
- $ps = $wpdb->get_results("SELECT ID, post_title, post_content"
- . " FROM $wpdb->posts WHERE post_status = 'publish'"
- . " ORDER BY post_date DESC LIMIT $_POST['post_num']");
- if($ps) {
- foreach($ps as $p) {
- echo "<h3>$p->ID - $p->post_title</h3>";
- echo "<p>$p->post_content</p>";
- }
- } else {
- echo 'Not found.';
- }
- }
- ?>
程式碼解說
第一行的action只會在已登入的user的情況才會被觸發. 第二行的action則會在未登入的user的情況被觸發. 再見到pp_newest_posts了, 這個pp_newest_posts必須配合client side的那個action!!
然後都很直觀, 連接資料庫, 取得資料, 顯示. 所有echo或以其他方法輸出的內容都會放到client side那個response變數內的~所以你想傳回JSON, XML, 做法都可以一樣~
最後, die以中止其他不可預期的內容被輸出……
話說我也見過以die來傳回內容, 例如:
$result = 'hihi, I am returned';
die($result);
至此, 完成. 以上です。
如有任何疑問, 請留comment^^
Pokemon Battle Online
如果你喜歡寵物小精靈,
如果你喜歡pokemon對戰,
如果你冒險時是不顯示招式動畫的,
如果你已經厭倦了收服極罕有的精靈, 厭倦了生蛋生蛋再生蛋, 厭倦了升努力值升lv,
如果你有很多很想用的精靈, 卻只能從其他版本傳送或金手指才能得到, 而用不到,
如果……
咁你就要試試PBO了~
下載可到此處: http://www.cngba.com/thread-16619161-1-1.html
或 我的Google協作平台 下載 PBO 0.7.7.2 (2.5Mb)
不同版本編號之間可能無法相容, 所以想跟朋友對戰的話就要預先問好版本~
另外大家隨時可在此留言約戰, 我會好開心的^^
更詳細的介紹, 將來有可能會新增的 (雖然機會率比較低XD”)
神様Re-U六回目
2010年1月22日
初めて日本語で神様Re-Uについて書くよね
神様Re-Uと言うのは、去年（2009年）鹿児島にあるカーピックへ交流したの皆さんのre-union（再び集まり？）
今までいろんな活動をしてた～カラオケしたり、映画を見たり、晩ご飯を食べたり……
きょうは、カフェへ行ったことよ～
ゲームは嬉しかった～みんなもたくさんしゃべった～
楽しかったよね^^”
「Deal」と言うのゲームははやく上手になったけど、「Pictionary」と「七級豬」と「層層疊」はちょっと……
負けたくない＞＜”
ところで、運気はいつも大切なものね……
さあ、もう思い出したくないー。ー”
次のRe-Uはキャンプかもよ～期待してる^^
第二学期の第二週
今はもう1月22日 1amごろ……
第二学期の第二週の火曜（星期二）からもう大変疲れたんだ！！！！！！
原因不明……疲れすぎたの？
でもそれはいけないよね！！
Computer Visionというクラスを選ぶか選ばないか、また決められらい＞＜”
内容も全然知らないし、クラスもまた出席 しないし……
先週から水曜と金曜もクラスがあるけど…
先週の土曜にそのクラスを申し込んた…
そして、今週の水曜に、大変疲れて、クラスが忘れたので、最後のクラスだと思ってた日本語のグラスを終わった後ですぐうちへ帰ったんだ！！
残念……
明日のクラスを忘れないで－﹏－”（今日でしょwwwww）
もし難しかったら、やっばり選ばないほうがいいね……
まあ、明日のこと明日に決める！（また今日でしょ…？）
用音樂發聲 青少年原創音樂發佈會
今日係用音樂發聲 青少年原創音樂發佈會的日子~
影左好多好多相~好開心~^^”用左蔡哥的wide angle鏡~
不過唔知係接得唔好定點呢, 影出來的相總覺得唔sharp……
話說今日好熱=o=”"太陽伯伯好勤力…………
好彩我冬天外表之下, 係夏天嘅衣著XD”
於是一直都係夏天~直至日落後開始凍, 先至變返冬天feel~
今日又再一次地上台了~不過當然唔係唱歌啦……
作為《魚魚尋寶記》的 填詞人喺台上講咗幾句~
今年已經係第二屆的用音樂發聲了, 唔知下年會點呢~?期待^^”
學業首位, programming次之, 填詞要放第三~!!希望做到啦~努力~!!
-
- 想聽我地的歌就黎呢度聽啦XD”http://www.channel4u.net
-
- 我們的backdrop~
-
- 傻傻的我XD”
-
- 多重身份@@”
-
- 冬天feel的我XD”
-
- 後台工作人員~
-
- 我們的大合照~
標點符號
話說今天上日文課時提及到作文時的標點符號的寫法, 例如 “、” (句点) 和 “。” (読点)等不能寫在行首, 而要擠在行尾最後一格. 而令我奇怪的是, 有些同學竟然說中文沒有這些問題!?
中文能寫在行首的標點符號, 大概只有:
- …… (省略號)
- —— (破折號)
- 「 (開引號)
不能寫在行首的標點待號則有:
- ， (逗號)
- 。 (句號)
- ！ (感嘆號)
- ？ (問號)
- 、 (頓號)
- ： (冒號)
- 」 (關引號)
希望只是我分一分心聽錯了^^”不過呢, 這些所謂的能, 不能, 其實都應該只是為了美觀, 又或者是習慣而已. 不過適當的規則我覺得還是必須的, 正如為甚麼作文時標題總是要在第一行留空四格開始寫一樣, 相信沒有甚麼不用不行的原因吧! 大概都是美觀或習慣~
中標準毒…rel
又在著眼於細微之處了~
話說面對《論盡蛋》這個完成不了的CMS, 總喜愛在細微的地方打轉. 這次是a tag的rel attribute.
嗯, 它是跟rev一對的, 但由於不在我打算討論的範圍, 所以請大家無視它XD”
這次想說的是GreyBox, Lightbox之類的Javascript library用了rel attribute來指明那些圖片要附加特效, 那些不用. 然而, 總覺得這是不合語意的做法. rel用的場合是, 說明href指向的url跟本頁的關係, 這段關係可能是friend, home, start, next, ……但gb_pageset[group1]會是一段合適的關係嗎?
但這也不要緊了, 我也不一樣用了<ruby></ruby>之類的XHTML 1.0 Transitional內不包含的tags嗎?
然而, 中毒的我, 卻仍想保留greybox的同時, 使用正確的rel~於是, 一輪翻查, 發現rel可以使用多個值的, 只要以空格分開即可~
但故事還未完結, 我把原本的rel="gb_pageset[g1]"改成了rel="home gb_pageset[g1]"後, greybox果然運作不能!!然後, 靈機一動, 改成rel="gb_pageset[g1] home", 就沒問題了~
所以, 總結一下廢話:
relattribute是可以同時有多個值的 (eg. 同時用homemestart), 只要以空格隔開各值即可.- 要greybox正確運作, 必需先寫greybox的
rel, 然後是其他的(eg.rel="gb_pageset[group] home me start").
ps. 我所測試的greybox是Wordpress plugin “GreyBox Integrator” version 1.0.
Recent Comments