Drupal中如何使用JQuery和Ajax

下面是使用jQuery，最簡單的Ajax調用：

$('#someDiv').load(url);

上面代碼的意思是：先尋找一個ID為“someDiv”的div，再載入設定的url 的HTML內容，並插入到這個div中。其實，這個例子實際上是AHAH而不是Ajax，因為它直接返回HTML，並不需要解析。另一方面，在嚴格意義上，Ajax從伺服器返回的資源是XML資料，在您的網頁上顯示之前需要解析。但事實上，只有極少數的Ajax應用程式返回XML資料。一種更常見的資料（伺服器返回資料）格式是JSON。這也是我們正在Drupal中使用的。

當你需要處理（分析）來自伺服器返回的資料時，下面的jQuery的工具函數提供強大的靈活性。

代碼如下	複製代碼
$.get(url, parameters, callback); $.post(url, parameters, callback); $.ajax(options);

$.get 和 $.post之間唯一的區別：http請求將參數發送到伺服器（傳遞數組的第二個參數）的方法。在Drupal中，大多數情況下，你不需要發送任何參數，因為你將調用的URL（菜單回調）中已經設定了，例如，“ajax/get/ node_details”需要一個參數“nid”,所以在菜單回調中你只需調用“ajax/get/node_details/123”，不需要把nid作為第二個變數的參數來傳遞。

現在來看一個很簡單的例子瞭解它是如何工作的。假設在您的網站上有一個投影片頁，類似於常見的新聞網站：圖片底下有數字按鈕，點擊這些數字按鈕將改變顯示的映像，而不需要重新載入頁面。好了，要完成這個例子，你首先要設定頁面，使第一張圖片輸出到一個容器（在這個例子，我們將假定正常載入的第一張圖片;所有圖片都是節點），再輸出所有必需的數字按鈕。然後，添加一些sjax的操作，你將需要建立一個模組定義你的Ajax回調。在模組中設定菜單回調，具體的代碼如下：
   

代碼如下

複製代碼

/** * Implementation of hook_menu(). */ function myModule_menu() {   $items['photos/get/photos'] = array(     'page callback' => 'mymodule_get_photos_ajax',     'type' => MENU_CALLBACK,     'access arguments' => array('access content'),   );   return $items; }    function mymodule_get_photos_ajax($nid) {   $photo = mymodule_get_photo($nid); // returns the filepath of my photo   $image = theme('image', $photo);   drupal_json(array('status' => 0, 'data' => $image)); }

我們的JavaScript請求的路徑為photos/get/photos/123，其中123是要尋找照片的nid，mymodule_get_photos_ajax（）函數利用 nid，將要返回映像的路徑放在一個JSON對象中。

下面是我們的JavaScript代碼：

代碼如下

複製代碼

Drupal.behaviors.myModule = function(context) {   $('a.photo_button:not(.mymodule-processed)', context).addClass('mymodule-processed')   .bind('click', function(){     $.get('/photos/get/photos/'+ parseInt(this.id, 10), null, imageDetails);     return false;   }); }   var imageDetails = function(response) {   var result = Drupal.parseJson(response); // 使用Drupal.parseJson 解析返回的 json 資料   $('div.field-type-image div.field-item').html(result.data); }