欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

Drupal中使用jQuery 处理 Ajax

shiping1 的头像
星期五, 2014-06-27 13:29 — shiping1

6. Drupal中使用jQuery 处理 Ajax

由 hooface 于 星期三, 2011-06-08 - 19:39 发表

Ajax具有特定的功能，就是使您的网页从服务器上返回并显示信息时，不需要重新加载整个页面。 jQuery提供了几个不同的Ajax命令，可根据您的具体要求选择。这是使用jQuery的最简单的Ajax调用：

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

上面代码的意思是：查找与id为'someDiv'ID的元素并加载指定'url'的内容，作为这个id元素的内容。其实，这个例子是实实在在的AHAH，而不是Ajax，因为它直接返回HTML，不需要进行解析。另一方面，在严格意义上说，Ajax从服务器检索资源返回的是XML数据，这些数据在网页上显示之前需要进行解析。但事实上，现在很少有Ajax应用程序返回XML数据。一个更常见的数据格式用于从服务器返回信息，它就是JSON。我们看看在在Drupal中如何使用它。

下面是jQuery工具函数。当从服务器返回数据需要分析处理时，这些函数提供了很强的灵活性：

$.get(url, parameters, callback);
$.post(url, parameters, callback);
$.ajax(options);

$.get 和 $.post之间唯一的区别：$.post是使用HTTP请求将你的参数（传递数组的第二个参数）发送到服务器。在Drupal中，很多时候你不需要发送任何参数，因为你调用的URL，通常是一个设置好参数的菜单回调，例如"ajax/get/node_details"需要一个参数“nid”，你只要简单调用'ajax/get/node_details/123'就可以了，而不需要将nid参数作为第二个变量的参数来发送。

我们用一个非常简单的例子来说明它是如何工作的。假设在您的网站有一个幻灯片页面，其中主图像下方有一些编号按钮，点击这些编号按钮立即可以看到图像变化，面无需刷新页面。那么，建立这样的效果，你首先要建立一个了网页，使其作为输出第一张图片的容器（这个例子的目的，我们将假定它加载正常的第一图片，同时，所有图片是节点），并建立所有必需的数字按钮。然后，要添加一些Ajax的动作，你需要建立一个自定义模块，来定义您的Ajax回调。在你的  .module 文件中设置菜单回调，像下面这样：

?
code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
/**
* 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，使用必要的PHP代码，将返回的图片的路径包含在一个JSON对象中，然后是由JavaScript解析。

下面是我们例子的JavaScript：

?
code
1
2
3
4
5
6
7
8
9
10
11
12
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);
  $('div.field-type-image div.field-item').html(result.data);
}

The first function here is binding the ajax behaviour to the onclick event of all buttons with the class "photo_button". It's using $.get, meaning it will make a http GET request to the path passed in as the first argument. Notice that it's getting the nid of the required node by parsing the id of the button - an easier way would have been to make the href of the button the ajax path itself but that would have nasty results for users without JavaScript. So the href is just going to go to the node and the JavaScript retrieves the nid by other means. We pass in null as the second argument because we don't need to pass in any additional parameters, we're already sending the nid in the url. And finally we specify the callback function, imageDetails, to be called when the request has been successful. The imageDetails function parses the JSON object that our PHP function has sent back and loads the 'image' portion of the result into our container div.

Also worth noting: in Drupal 6, you wrap all your module’s jQuery behaviors in a function assigned to Drupal.behaviors.myModule; there's no need to call it within$(document).ready() as Drupal automatically does it for you; all behaviors can then be reattached to DOM elements that have come from an AJAX call. For more information on this look at the Drupal JavaScript API documentation

原文：http://drupal.org/node/305747

来自 http://www.cuitu.net/book/6-drupalzhong-shi-yong-jquery-chu-li-ajax


 

Drupal中的JQuery和Ajax

由 hooface 于 星期日, 2011-12-18 - 20:44 发表

Ajax具有一种特殊的功能，就是您不需要重新加载页面，就可以从服务器上获取资源并显示。根据您的具体要求，jQuery提供了几个不同的Ajax命令。下面是使用jQuery，最简单的Ajax调用：

?
code
1
$('#someDiv').load(url);

上面代码的意思是：先查找一个ID为“someDiv”的div，再加载设定的url 的HTML内容，并插入到这个div中。其实，这个例子实际上是AHAH而不是Ajax，因为它直接返回HTML，并不需要解析。另一方面，在严格意义 上，Ajax从服务器返回的资源是XML数据，在您的网页上显示之前需要解析。但事实上，只有极少数的Ajax应用程序返回XML数据。一种更常见的数据 （服务器返回数据）格式是JSON。这也是我们正在Drupal中使用的。


当你需要处理（分析）来自服务器返回的数据时，下面的jQuery的工具函数提供强大的灵活性。
 

?
code
1
2
3
$.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回调。在模块中设置菜单回调， 具体的代码如下：
 

?
code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
* 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代码：
 

?
code
1
2
3
4
5
6
7
8
9
10
11
12
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);
}

原文：Ajax in Drupal using jQuery


 

 

 

来自 http://www.cuitu.net/book/6-drupalzhong-shi-yong-jquery-chu-li-ajax
普通分类: 
drupal
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2