WordPress 中的 admin-ajax.php 使用教學 #4

AJAX 架構說明

如何在 WordPress 中運用 ajax ，其實很簡單，我們先了解一般網頁的執行順序是先在伺服器端執行完 PHP ，再將 PHP 所編譯後的資料回傳到用戶端交由 HTML 呈現， 而 ajax 的架構是在原本的 Client 端中，向 Server 端提出請求並且取地回應的 XML 資料，便可以不需要重新整理頁面便可以執行後端程式碼。

在 WORDPRESS 中該如何使用 AJAX ?

因為在 wordpress 中，我們只要把 ajax 的 url 設定成 admin-ajax.php 並交給他去處理， 我們要做的只有兩個部分 ，分別在前台與後台加上這兩段程式就可以了。

step 1. 在前台中的 ajax 程式呼叫 : 在前端頁面中添加此段程式碼

<script>
    var $ = jQuery.noConflict();  // 避免出現 ‘$’ is not defined 問題
    $.ajax({ 
        type: "POST",   // 可以選擇 post / get
	url: ajaxurl,  // 在 wordpress 中使用 ajax 統一把連結丟到這個目標網址 : admin-ajax.php ，並交由該檔案處理我們丟過去的資料並進行資料輸出。
        data: {'action':'my_action_name',
	       'your_data': your_data },
        success:function(response){
		// enter your code here !
              },
        error: function(xhr) {
                alert('Ajax request 發生錯誤');
               }
	}); 
}
</script>

step 2. 在 Server 端中執行的程式碼 : 在 function.php中添加 ( 外觀 > 佈景主題編輯器 中找到 )

/*here is ajax function*/
add_action('wp_ajax_my_action_name','my_function');
add_action('wp_ajax_nopriv_my_action_name','my_function');
function my_function(){
	$your_data = $_POST['your_data'];
        // enter your code here !
	die();
}

注意 :

• 在 wp_ajax_xxxxx 與 wp_ajax_nopriv_xxxxx 這兩個 function 後面的 xxxxx 的命名是來自於在前端 ajax action 中的命名。

• wp_ajax 寫給 有登錄的用戶 。 wp_ajax_nopriv 是 沒有登陸的用戶 ，所以如果沒有登陸的用戶，後面的可以去寫不同的 my_function 去觸發，而上述的例子是讓不論有沒有登陸的用戶都去執行相同的動作。