Drupal中如何使用JQuery和Ajax

时间：2014-12-22 编辑：简简单单来源：一聚教程网

下面是使用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);
}

上一个： Dedecms5.7 列表标题显示分页页码方法
下一个： drupal定制用户注册、登录、重置密码页面步骤方法

推荐专题

最新下载

热门教程

Drupal中如何使用JQuery和Ajax

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程