[Apache Click快速开发]为组件添加Ajax行为

Apache中有个名为Behavior的接口，用来定义组件的行为。查看源码后发现Click只提供了一种行为的实现，即：DefaultAjaxBehavior

通过查看Click源代码不难发现其AbstractControl中定义了一个addBehavior方法，为组件添加一个行为。因此，所有组件都具有了添加行为的方法，因为所有组件均继承自AbstractControl这个抽象类。

[下面是Click各组件继承顺序]

下面先看看最简单的通过超链接提交ajax请求：

首先，初始化4个ActionLink，测试4种各有区别的ajax请求

第一种，通过组件的addBehavior方法，添加一个DefaultAjaxBehavior，并重写其onAction方法，以此来重新定义其响应结果。

private ActionLink greetLink = new ActionLink("toGreet", "greet"); addControl(greetLink); greetLink.addBehavior(new DefaultAjaxBehavior(){ @Override public ActionResult onAction(Control source) { return new ActionResult("Hi, I am Apache Click,came from Carlifornia"); } });$("#greet-link").click(function(){ $.post($(this).attr("href"),$(this).attr("id")+"=2",function(data){ $("#msg").html(data); }); return false; });

第二种，htm中通过指定请求参数pageAction为Page中的调用方法名，本例中为sayHello

$("#hello-link").click(function(){ $.post($(this).attr("href"),"pageAction=sayHello",function(data){ $("#msg").html(data); }); return false; });private ActionLink helloLink = new ActionLink("sayHello","hello"); addControl(helloLink); public ActionResult sayHello(){ return new ActionResult("Hello, Welcome!"); }

第三种，传递参数，并返回json格式数据

private ActionLink jsonLink = new ActionLink("jsonLink","json"); addControl(jsonLink); public ActionResult jsonRequest(){ String type = getContext().getRequestParameter("type"); String currentDate = new SimpleDateFormat("yyyy-MM-dd").format(new Date()); String json = "{\"date\":\""+currentDate +"\",\"msg\":\"Json Result Returned,request parameter \'type:"+type+"\'\"}"; return new ActionResult(json); }$("#json-link").click(function(){ $.post($(this).attr("href"),"pageAction=jsonRequest&type=ajax",function(data){ var result = $.parseJSON(data); $("#msg").html("["+result.date+"]"+result.msg); }); return false; });

第四种，返回xml格式数据

private ActionLink xmlLink = new ActionLink("xmlLink","xml"); xmlLink.setId("xml-link"); addControl(xmlLink); public ActionResult xmlRequest(){ String xml = "<result><msg>Hello Xml Result From Ajax Request. </msg></result>"; return new ActionResult(xml); }$("#xml-link").click(function(){ $.post($(this).attr("href"),"pageAction=xmlRequest",function(data){ var result = $(data); $("#msg").html(result.find("result").text()); }); return false; });

接下来，看看怎么来为table做一个ajax无刷新的分页

下面会省掉初始化table中column的过程

private Table ajaxTable = new Table("ajaxTable");private Form ajaxForm = new Form("ajaxForm");

关键的几个地方为：为table,form添加defaultAjaxBehavior、在getElements方法中添加处理的js脚步导入

ajaxTable.getControlLink().addBehavior(new DefaultAjaxBehavior(){ @Override public ActionResult onAction(Control source) { ajaxTable.onProcess(); return new ActionResult(ajaxTable.toString(),ActionResult.HTML); } });@Override public List<Element> getHeadElements() { if (headElements == null) { headElements = super.getHeadElements(); headElements.add(new JsImport("/js/jqueryui/jquery-1.6.2.js")); //headElements.add(new JsImport("/js/form-ajax.js")); headElements.add(new JsImport("/js/table-ajax.js")); } return headElements; }

table-ajax.js:

jQuery(document).ready(function() { jQuery("#ajaxTable th a,.pagelinks a ,.pagelinks-nobanner a").live('click', function(event){ // Make ajax request sortTable(event); // Prevent the default browser behavior of navigating to the link return false; }) }) function sortTable(event) { var link = jQuery(event.currentTarget); var url = link.attr('href'); jQuery.get(url, function(data) { // Update the table container with the new table jQuery("#tableContainer").html(data); }); }

最后，来做一个ajax提交表单

private Form ajaxForm = new Form("ajaxForm");

初始化表单，包括添加元素，为提交和取消按钮添加ajax行为

TextField account = new TextField("account","账号", true); account.setTitle("不少于6位"); account.setMinLength(6); ajaxForm.add(account); ajaxForm.add(new DateField("birth", "出生日期")); ajaxForm.add(new PasswordField("passwd1", "密码", true)); ajaxForm.add(new PasswordField("passwd2", "确认密码", true)); Submit sub = new Submit("subAjaxForm","提交"); ajaxForm.add(sub); Submit cancel = new Submit("cancelForm", "取消"); ajaxForm.add(cancel); sub.addBehavior(new DefaultAjaxBehavior(){ @Override public ActionResult onAction(Control source) { return new ActionResult(ajaxForm.toString(),ActionResult.HTML); } }); cancel.addBehavior(new DefaultAjaxBehavior(){ @Override public ActionResult onAction(Control source) { ajaxForm.clearErrors(); ajaxForm.clearValues(); return new ActionResult(ajaxForm.toString(),ActionResult.HTML); } }); ControlRegistry.registerAjaxTarget(ajaxForm);//这行代码很重要，将form指定为ajax请求的目标

之后，还要在getElements方法中导入js脚本(这不是必须，你也可以在Htm中直接书写js脚本)

headElements.add(new JsImport("/js/form-ajax.js"));

脚本我是在apache官方上面copy而来，稍加修改

jQuery.noConflict(); // Register a function that is invoked as soon as the DOM is loaded jQuery(document).ready(function() { // Register a 'click' handler on the submit button jQuery("#ajaxForm_subAjaxForm, #ajaxForm_cancelAjaxForm").live('click', function(event){ // Post form to server postForm(event); // Prevent the default browser behavior of navigating to the link return false; }) }) function postForm(event) { // Retrieve the Form and submit button elements var form = jQuery("#ajaxForm"); var submit = jQuery(event.currentTarget); // The server URL can be retrieved from the Form 'action' event var url = form.attr('action'); var formData = form.serialize(); formData+='&'+form.attr('id')+'=1'; formData+='&'+submit.attr('name')+'='+submit.attr('value'); jQuery.post(url, formData, function(data) { // Replace the entire Form with the server response form.replaceWith(data); // Replacing the Form with the Form from the Ajax response, means all // event bindings are lost. For example the DateField button won't show // the Calendar. Here we find the DateField setup script, and evaluate it var dateSetupScript = jQuery('#ajaxForm_date-js-setup').html(); eval(dateSetupScript); // Provide user feedback var feedbackDiv = jQuery('#form-msg'); // Check for form errors if(jQuery('#ajaxForm-errors').length == 0) { feedbackDiv.removeClass('errorMsg').addClass('infoMsg'); // Set feedback message depending on which button was clicked if (submit.attr('name') == 'subAjaxForm') { feedbackDiv.html("表单提交成功"); } else { feedbackDiv.html("取消表单"); } } else { feedbackDiv.removeClass('infoMsg').addClass('errorMsg'); feedbackDiv.html("表单包含错误"); } }); }

Click中Ajax特性就介绍到这里，下午太容易犯困了，休息休息~