15 Ajax表单流程分析

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

    此时，省份的可选项有“北京市”、“河南省”。市的可选项为空，县的可选项为空。也就是初次访问这个页面时，$default_sheng、$default_shi、$default_xian的值都为空。

    接着，当我们在表单页面选择“河南省”的时候，系统进行了Ajax调用，如图所示：

 

    我们看到这里出现了“请稍等”的提示，表明系统进行了Ajax调用。聪明的读者会想到，Ajax回调应该就是hengshixian_sheng_callback了，这样理解是对的，但是还要再补充一点，那就是Drupal在后端重新构建了整个表单，在构建完整个表单后，根据hengshixian_sheng_callback回调函数，向浏览器端只返回变化的元素$form['shi']，浏览器端根据服务器端的返回值，重新设置了 “市”这一表单元素。

    在重新构建整个表单的过程中，此时$default_sheng的值，就是“河南省”的tid了，已经不再为空，所以此时“市”的可选项就不再为空了。

    当我们选择“新乡市”，系统再次进行了Ajax调用，如图所示：

 

    此时，Drupal在后端再次重新构建了整个表单，在构建完整个表单后，根据shengshixian_shi_callback回调函数，向浏览器端返回更新过的元素$form['xian']，浏览器端根据服务器端的返回值，重新设置了 “县”这一表单元素。

   在重新构建整个表单的这次过程中，此时$default_sheng的值，就是“河南省”的tid了，此时“市”的可选项不为空。此时$default_shi的值，就是“新乡市”的tid了，所以此时“县”的可选项就不再为空了。如图所示：

 

 

    当我们做完这样的流程分析以后，我们再来理解这段代码：

'#ajax' => array(      

'callback' => 'shengshixian_sheng_callback',      

'wrapper' => 'shi-wrapper-div',      

'method' => 'replace',      

'effect' => 'fade',    

),

    'callback'对应的是回调函数，通常这个回调函数非常简单，返回表单中的特定部分就可以了，注意这里是系统重新构建了整个表单后；'wrapper'表示动态更新的部分，这里对应于'#prefix' => '<div id="shi-wrapper-div">'，也就是表单元素“市”的主内容；'method'表示对wrapper中内容的处理方法，可选值有'replace' (默认)、 'after'、 'append'、 'before'、'prepend'，这里是'replace'；'effect'表示Ajax特效，可选值有'none' (默认)、 'fade'、'slide'。

 

    最后，我们做一下归纳与总结，Drupal 7 中的Ajax表单，用起来非常简单，不需要编写自己的JQuery代码，回调函数也极其简单，只要我们遵守Drupal的规范，其余的工作都有Drupal替我们完成。从本质上来讲，这里的Ajax表单，就是多步表单的一个特例，我在前面，多次强调，重新构建整个表单，就是为了突出它其实就是一个多步表单。

 

    构建Ajax表单，需要注意三点：一是为带有ajax属性的元素提前设置默认值，二是正确的设置表单元素的ajax属性，三是编写ajax的回调函数。

 

    有关表单元素Ajax属性的更多信息，可参考http://api.drupal.org/api/drupal/developer--topics--forms_api_reference.html#properties。