Drupal中如何使用JQuery和Ajax
发布:smiling 来源: PHP粉丝网 添加日期:2015-04-04 10:58:13 浏览: 评论:0
Ajax是一种用于创建快速动态网页的技术,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,jQuery提供了几个不同的Ajax命令,本文来讲讲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'),
- ); //开源软件:phpfensi.com
- 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);
- }
Tags: Drupal JQuery Ajax
相关文章
- ·Drupal中l()函数使用方法详解(2014-11-27)
- ·Drupal核心与模块版本及版本号选择技巧(2014-12-05)
- ·Drupal Schema 模块从现有数据库到hook_schema(2014-12-05)
- ·Drupal Overlay 应用到指定页面2种方法(2014-12-05)
- ·解决Drupal Overlay中margin-top无效问题(2014-12-05)
- ·Drupal 实现多语言站点的方法(2014-12-05)
- ·Drupal 7操作数据库常用sql(更新,删除,查询)(2014-12-05)
- ·Drupal 7自定义表单开发要点与例子(2014-12-05)
- ·使用 Drupal Form Hooks 进行表单自定义修改(2014-12-05)
- ·Drupal Hooks Alter的先后顺序(2014-12-05)
- ·Drupal 7 实现上一篇下一篇的简单方法(2015-02-16)
- ·Drupal 7多站点共用同一个数据库如何配置(2015-04-04)
- ·Drupal如何正确的方式渲染Field(字段)实例(2015-04-04)
- ·总结Drupal电商平台 Commerce Ubercart 比较(2015-04-04)
- ·简单方法修改drupal运行时的php内存(2015-04-04)
- ·简单办法解决Drupal无法正确获取到ip地址的问题(2015-04-04)
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)