You are here
简单的Drupal AJAX负载使用jQuery和交付的回调
简单的Drupal AJAX负载使用jQuery和交付的回调
注：本教程大约需要自定义模块发育或功能改变的知识。（链接到如何构建一个模块）。
介绍
Drupal的文档中的大多数AJAX代码侧重于传统的JSON / _get（）应用程序，这需要的信息JSON操作，当它到达客户端。使用jQuery.load（）功能，您可以从将只用JavaScript代码一行在目标元素直接呈现URL加载HTML。
这里真正的窍门是只得到你所需要的，而不是HTML渲染页眉，页脚，并附带一个完整的页面加载所有其他元素。这就是“交付回调'在制定hook_menu进场。“投放回调”设置默认为drupal_deliver_html（）返回一个完全呈现HTML页面。我们需要定义我们自己交付的回调函数返回只是我们想通过AJAX呈现在客户端的HTML。
我们要
- 改变链路的标记将触发AJAX请求
- 添加一个额外的容器了AJAX的内容应呈现的标记
- 写/能改变一些代码自定义模块。
链接标记和目标容器添加到您的网站
- 定义一个链接来执行AJAX调用：
<a class="btn" href="#" onclick="myModule_ajax_load()">Ajax Test</a> - 设置将接收AJAX回调的元素：
<div id="ajax-target">Ajax goes here!!!</div>
自定义模块代码
- 创建一个JavaScript函数将处理使用jQuery.load（）调用。在路径NID的$仅仅是一个例子。它可以是任何可变的。
<script> function myModule_ajax_load() { jQuery("#ajax-target").load("/node/get/ajax/11"); } </script> - 注册将要呈现通过实施hook_menu（）的HTML的网址：
/** * Implements hook_menu(). */ function myModule_menu() { $items['node/get/ajax/%'] = array( 'page callback' => 'myModule_ajax_get_ajax', // Render HTML. 'page arguments' => array(3), 'type' => MENU_CALLBACK, 'access arguments' => array('access content'), 'delivery callback' => 'myModule_ajax_callback', // Magic goes here. ); return $items; } - 创建页面回调和交付的回调函数：
function myModule_ajax_get_ajax($nid) { // This example loads a node and returns the teaser. // You can return whatever you want, including forms. $node = node_load($nid); return node_view($node, 'teaser'); } function myModule_ajax_callback($page_callback_result) { // Only render content $content = drupal_render($page_callback_result); // Add CSS and JS files, add some markup $html = '<html><head><title></title>' . drupal_get_css() . drupal_get_js() . '</head><body class="jquery-ajax-load">' . $content . '</body></html>'; print $html; // Perform end-of-request tasks. drupal_page_footer(); }
现在，让我们在您的网站加载任何页面只用3行代码
上面的例子可以让您从您的网站呈现任何东西，但有些东西已经存在，如视图，表单或web表单。那么，如何才能让他们无需重新构建它们。
对于一开始我们需要使用menu.api渲染任何网址到页面的功能，它的名字是menu_execute_active_handler（） ，这个功能在默认情况下会返回一个完整页面上的第一个参数设置，但如果你设置第二个参数为FALSE它返回只是你的页面的内容部分，无论多么或者谁产生了。
所以，现在我们将重建我们的myModule_ajax_get_ajax（）函数在步骤5中仅返回在您的网站中声明的任何页面的内容。
1.定义一个链接来执行AJAX调用：<a class="btn" href="#" onclick="myModule_ajax_load()">Ajax Test</a>
2.设置将接收AJAX回调的元素：<div id="ajax-target">Ajax goes here!!!</div>
3.创建JavaScript函数，将做的号召，用jQuery.load（），我使用的任意URL“节点/ 11”，这可以是一个变量，用一个前缀“/得/ AJAX”将触发hook_menu ：
<script>
function myModule_ajax_load() {
jQuery("#ajax-target").load("/get/ajax/node/11");
}
</script>
4.创建将呈现HTML与hook_menu（）的网址：
/**
* Implementation of hook_menu().
*/
function myModule_ajax_menu() {
$items['get/ajax'] = array(
'page callback' => 'myModule_ajax_get_ajax', // Render HTML
'type' => MENU_CALLBACK,
'access arguments' => array('access content'),
'delivery callback' => 'myModule_ajax_callback', // Magic goes here
);
return $items;
}
5.创建页面回调和交付的回调函数：
function myModule_ajax_get_ajax() {
// The function will receive the array of arguments after the "get/ajax" prefix
$path = implode('/', func_get_args());
$render_string = menu_execute_active_handler($path, FALSE);
return $render_string;
}
function myModule_ajax_callback($page_callback_result) {
// Only render content and validates return
$content = is_string($page_callback_result) ? $page_callback_result : drupal_render($page_callback_result);
$html = '' . drupal_get_css() . drupal_get_js() . '' . $content . ''; print $html; drupal_page_footer(); }