基于Struts2框架下实现Ajax有两种方式,第一种是原声的方式,另外一种是struts2自带的一个插件。
js部分调用方式是一样的:
JS代码:
1 function testAjax() { 2 3 var $userNameInput = $("#ajax_username"); 4 var userName = $userNameInput.val(); 5 6 $.ajax({ 7 url : "originAjax.action", 8 type : "GET", 9 data : "ajaxField=" + userName, 10 success : function(data, textStatus) { 11 alert(data); 12 } 13 }); 14 }
第一种原生的实现方式:
Action中创建一个方法:
private String username; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public void checkUserName() throws IOException { HttpServletResponse response = ServletActionContext.getResponse(); PrintWriter writer = response.getWriter(); writer.print("hello " + username); writer.flush(); writer.close(); }
struts.xml中配置:
<action name="originAjax" class="TestAction" method="checkUserName" />
这种方式不太推荐使用。
这里重点讲解下第二种方式:
1.引入struts2-json-plugin-2.5.2.jar
2.Action中添加类似的如下代码:
private String result; public String getResult() { return result; } public void setResult(String result) { this.result = result; } /** * * AJAX for check MerchantAccount start * * */ private String merchantAccount; public String getMerchantAccount() { return merchantAccount; } public void setMerchantAccount(String merchantAccount) { this.merchantAccount = merchantAccount; } // AJAX for check Merchant public String checkMerchantAccountMethod() throws IOException { AppResultJsonBean ajaxResultJsonBean = new AppResultJsonBean(); if (StarCloudStringUtils.isEmpty(merchantAccount)) { ajaxResultJsonBean.setIsOK(false); ajaxResultJsonBean.setData(null); ajaxResultJsonBean.setResultCode(-1); ajaxResultJsonBean.setResultMessage("商家账号不能为空"); ajaxResultJsonBean.setOther(null); JSONObject ajaxResultJsonData = JSONObject .fromObject(ajaxResultJsonBean); this.result = ajaxResultJsonData.toString(); return SUCCESS; } if (!StarCloudStringUtils.isMobile(merchantAccount)) { ajaxResultJsonBean.setIsOK(false); ajaxResultJsonBean.setData(null); ajaxResultJsonBean.setResultCode(-2); ajaxResultJsonBean.setResultMessage("商家账号格式不合法"); ajaxResultJsonBean.setOther(null); JSONObject ajaxResultJsonData = JSONObject.fromObject(ajaxResultJsonBean); this.result = ajaxResultJsonData.toString(); return SUCCESS; } 。。。 MerchantBean checkMerchantBean = merchantIService.findMerchantByAccount(merchantAccount); if (checkMerchantBean != null) { ajaxResultJsonBean.setIsOK(true); ajaxResultJsonBean.setData(null); ajaxResultJsonBean.setResultCode(0); ajaxResultJsonBean.setResultMessage("商家账号可用"); ajaxResultJsonBean.setOther(null); JSONObject ajaxResultJsonData = JSONObject.fromObject(ajaxResultJsonBean); this.result = ajaxResultJsonData.toString(); return SUCCESS; } else { ajaxResultJsonBean.setIsOK(false); ajaxResultJsonBean.setData(null); ajaxResultJsonBean.setResultCode(-3); ajaxResultJsonBean.setResultMessage("商家账号不存在"); ajaxResultJsonBean.setOther(null); JSONObject ajaxResultJsonData = JSONObject.fromObject(ajaxResultJsonBean); this.result = ajaxResultJsonData.toString(); return SUCCESS; } } /** * * AJAX for check MerchantAccount start end * * */
Struts.xml中配置如下:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.5//EN" "http://struts.apache.org/dtds/struts-2.5.dtd"> <struts> <!-- AJAX 1.引入Jar包 2.所在包必须要继承自JSON-default 3.resultType是JSON 4.附加了一个参数excludeNullProperties,目的是不序列化Action里为null的字段。 5.<result>元素没有name属性,也没有跳转值 --> <package name="struts_web_product_ajax" extends="json-default"> <!-- 新增商品信息检查账号 --> <action name="checkMerchantAccountAction" class="controllers.actions.web.product.PrepareAddProductAction" method="checkMerchantAccountMethod"> <result type="json"> <param name="excludeNullProperties">true</param> <param name="root">result</param> </result> </action> </package> </struts>
JS中接受返回结果:
返回JSON格式:
JS解析如下:
function checkMerchantAccountAjax() { var $merchantAccount = $("#merchantAccount"); var merchantAccount = $merchantAccount.val(); $.ajax({ url : "checkMerchantAccountAction", type : "GET", data : "merchantAccount=" + merchantAccount, success : function(data, textStatus) { var resultJSONData = JSON.parse(data);//注意这里必须有,因为之前返回的是result="json字符串",但并类型不是JSON if(resultJSONData.isOK){ $merchantAccount.css("color", "black"); return true; }else{ $merchantAccount.css("color", "red"); layer.tips(resultJSONData.resultMessage,$merchantAccount, { tips : [3, '#3595CC'], time : 4000 });//end tips return false; }//end else }//end success });//end ajax }// end js