• Using AJAX in WP2.9 (with jQuery)

    0 comments
    皮蛋黃
    Wordpress
    2010.01.27

    本篇文章要求讀者懂基本Javascript及明白AJAX概念, 並對Wordpress的template tags (hook & action 相關) 有基礎認識的初心者.
    (要求似乎還真高@@”其實簡單來說, 是給學習Wordpress Plugin之類的初心者的)

    這是一篇總結, 一篇整理, 一份食譜; 用來做甚麼, 這些創意留給滿腦主意的讀者了~^^”
    以下將會以一個極簡單的例子作說明. 效果是動態載入最新的posts.

    AJAX簡說

    甚麼異步, XML, …….的我就不多說了, 大家可到以下的參考網址再深入了解~

    參考網址:

    簡而言之, 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會自動載入的了, 所以大可無視~

    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/my_jquery.js"></script>

    也可考慮上行, 於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>
<div id="newest_posts"></div>
</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.';
}

die();
}
    程式碼解說

    第一行的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^^

    Write a comment