GloolsGuan's picture

Posted by GloolsGuan on January 16, 2013 at 5:32am

Drupal AJAX 系统表单处理流程

1. 设置

   DRUPAL7 AJAX form 的作用域通常为:

   1. 按钮, 例如各类 button, 和 submit等,可以响应事件。
   2. FORM 各类元素,包含input, textarea, options 等,都可以相应AJAX事件。

   AJAX form 的有效性设置

   
$form['submit'] = array(
'#type' => 'submit',
'#value' => 'Submit',
'#ajax' => array(
'event' => 'click',
'callback' => 'sample_ajax_render',
'method' => 'replace'
)
);


   AJAX所请求path 需要设置 'delivery callback' => 'ajax_deliver' 如下:

   function SAMPLE_menu(){
   return array(
   'register/%' => array(
   'title' => t('Register'),
   'type' => MENU_CALLBACK,
   'page callback' => 'frontend_register',
   'access arguments' => array('access content'),
   'file' => 'register.page.inc',
   'delivery callback' => 'ajax_deliver'
   )
   );
   }
   注: 该设置标明,该页面的输出需要由ajax_deliver控制,通常输出ajax commands(@see includes/ajax.inc)格式的json字符串,
   并会附加一些其它系统默认操作。

   AJAX元素所设置的callback函数格式:

   function sample_ajax_render(&$form, &$form_state){

   $commands = array();
   $commands[] = ajax_command_[REPLACE](....);
   /*
    D7系统内置支持的AJAX命令全部在 includes/ajax.inc 文件中。这里ajax_command_? 设置,是由服务器端设置客户端AJAX响应命令。
    也就是说,这里设置的命令客户端ajax.js 会有响应的操作。比如置换 replace, 附加 append等等。
    注意,这里ajax_command_invoke,默认只支持jQuery内建的方法,如果是你自己开发的方法,通过如下代码加载到jQuery:
    var a=function(){
    this.b = 'hello,world'
    };
    //-- 这里只是申请一个jquery名字空间,并不是实际的设置。
    jQuery.fn.extend(jQuery, a);
    //-- 下面的语句会使jQuery对象化a函数,例如, 在如下语句执行后, 你可以通过 alert(a.b); 得到 "hello,world"输出结果。
    jQuery.a = a;
    回到D7 ajax.js, 如上所述,此时如果你在服务器端:
    ajax_command_invoke(NULL, 'a', array(...));
    ajax.js 并不能真的调用 a 对象,但是如果这里的 a 是 'addClass'等 jQuery内建对象,则可以正常使用,解决的办法是修改ajax.js源码如下:
    //-- Fixed by GloolsGuan@glools.com at 2013年1月6日
    //-- original drupal7 ajax.js code --
    $element[response.method].apply($element, response.arguments);
    //-----------------------------------
    //-- new code for fixing personal jQuery object invoke
    if (undefined==$element[response.method]) {
    $[response.method](response.arguments);
    }else{
    $element[response.method].apply($element, response.arguments);
    }
    //------------------------------------
    将以上原始ajax.js 604行左右, 代码换成新代码即可。
    invoke: function (ajax, response, status);
   */
   return array(
    '#type' => 'ajax',
    '#commands' => $ajaxCommands
   );
   

   }

2. AJAX form的处理流程
   -- PHP 端设置 --

   1. drupal系统根据表单AJAX项设置,会自动加载ajax.inc 文件,包含ajax.js程序。
      -- DRUPAL系统自动处理部分 --
   2. drupal系统会修改表单,在添加有 #ajax项目的FORM 元素上,添加 HTML 节点属性
      class='ajax-processed', 以此标明该节点相应需要AJAX处理。
      -- 客户端相应部分--
   3. 当用户点击或触发AJAX标注的FORM元素时,一个AJAX请求会由ajax.js 建立,并根据设置请求服务器响应。
      -- 服务器端相应部分 --
   4. 服务器接收到AJAX请求依次处理顺序如下:
      1. 处理表单 即 [FORM_ID]_validate, [FORM_ID]_submit等,会先执行。
      2. 调用sample_ajax_render,处理表单输出结果。
         -- D7系统操作部分
      3. 处理sample_ajax_render返回值,并附加系统AJAX相关参数生成JSON字符串,由 ajax_deliver负责最终输出结果。
         换句话说,在sample_ajax_render 中,如果你 直接 print 'hello,world'; AJAX客户端也可以接收,并且服务器端正常运行。
         但是客户端AJAX表示崩溃,因为无法识别数据,当然如果客户端操作你自己写的,另当别论。
   5. 客户端ajax.js根据服务器端返回json格式的drupal7 ajax 命令,依次执行。
   6. 一次AJAX请求流程结束。

3. 自己调用Drupal.ajax js 对象可以的,注意事项如下,且意义不大:

   1. ajaxInstance = new Drupal.ajax(base, element, element_settings);
   2. base 参数是form表单父级节点。
      element 是当前操作的html元素对象。
      element_settings 是ajax请求相关参数设置,具体参考 ajax.js 这里ajax.js说明很不清楚,得自己研究代码。

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: