struts2 + jquery + json 进行ajax请求

第一步：创建 ajax Java Web 项目。

 

第二步：加入struts2 的 jar 包，这里需要四个包  freemarker.jar  ognl.jar  struts2-core.jar  commons-fileupload.jar  commons-io.jar   xwork-core-2.1.6.jar （这个包加上版本号，是因为下文要提到它），这六个包是 struts 必须依赖的 jar 包，什么好说的。

 

第三步：修改 web.xml  加入  struts 的过滤器，代码如下：

view plain copy to clipboard print ?

1. <? xml   version = "1.0"   encoding = "UTF-8" ?>   
2. < web-app   version = "2.5"    
3.     xmlns = "http://java.sun.com/xml/ns/javaee"    
4.     xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"    
5.     xsi:schemaLocation ="http://java.sun.com/xml/ns/javaee   
6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">   
7.       
8.     < filter >   
9.         < filter-name > struts2 </ filter-name >   
10.         < filter-class > org.apache.struts2.dispatcher.FilterDispatcher </ filter-class >   
11.     </ filter >   
12.     < filter-mapping >   
13.         < filter-name > struts2 </ filter-name >   
14.         < url-pattern > /* </ url-pattern >   
15.     </ filter-mapping >   
16.       
17.       
18.       
19.   < welcome-file-list >   
20.     < welcome-file > index.jsp </ welcome-file >   
21.   </ welcome-file-list >   
22. </ web-app >   

<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>

 

第四步：加入json 的包，这里需要两个： json-lib.jar  jsonplugin.jar  这里要注意很重要的一点，因为 json 大量引用了 Apache commons 的包，所以这里要一并加入，需要的 commons 包共 4 个，除了 commons 的包外，还需要引入一个  ezmorph 的包，所以这一步一共要引入 7 个包，列出如下： commons-collections.jar  commons-lang.jar  commons-beanutils.jar  commons-logging.jar  ezmorph.jar  再加上 json 的两个包共七个，一次性加入。

 

第五步：写后台处理 AjaxLoginAction . action，内容如下：

view plain copy to clipboard print ?

1. package  qy.test.action;  
2.   
3. import  java.util.HashMap;  
4. import  java.util.Map;  
5.   
6. import  net.sf.json.JSONObject;  
7.   
8. import  com.opensymphony.xwork2.ActionSupport;  
9.   
10. public   class  AjaxLoginAction  extends  ActionSupport {  
11.   
12.     // 用户Ajax返回数据   
13.     private  String result;  
14.   
15.     // struts的属性驱动模式，自动填充页面的属性到这里   
16.     private  String loginName;  
17.     private  String password;  
18.   
19.     @Override   
20.     public  String execute() {  
21.   
22.         // 用一个Map做例子   
23.         Map<String, String> map = new  HashMap<String, String>();  
24.   
25.         // 为map添加一条数据，记录一下页面传过来loginName   
26.         map.put("name" ,  this .loginName);  
27.   
28.         // 将要返回的map对象进行json处理   
29.         JSONObject jo = JSONObject.fromObject(map);  
30.   
31.         // 调用json对象的toString方法转换为字符串然后赋值给result   
32.         this .result = jo.toString();  
33.   
34.         // 可以测试一下result   
35.         System.out.println(this .result);  
36.   
37.         return  SUCCESS;  
38.   
39.     }  
40.   
41.     //getter  setter 方法省略   
42. }  

package qy.test.action; import java.util.HashMap; import java.util.Map; import net.sf.json.JSONObject; import com.opensymphony.xwork2.ActionSupport; public class AjaxLoginAction extends ActionSupport { // 用户Ajax返回数据 private String result; // struts的属性驱动模式，自动填充页面的属性到这里 private String loginName; private String password; @Override public String execute() { // 用一个Map做例子 Map<String, String> map = new HashMap<String, String>(); // 为map添加一条数据，记录一下页面传过来loginName map.put("name", this.loginName); // 将要返回的map对象进行json处理 JSONObject jo = JSONObject.fromObject(map); // 调用json对象的toString方法转换为字符串然后赋值给result this.result = jo.toString(); // 可以测试一下result System.out.println(this.result); return SUCCESS; } //getter setter 方法省略 }

 

第六步：写前台index.jsp ，注意加入  jquery 的 js 文件 内容如下：

view plain copy to clipboard print ?

1. <%@ page language= "java"  contentType= "text/html; charset=UTF-8"   
2.     pageEncoding="UTF-8" %>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd" >  
4. <html>  
5.     <head>  
6.         <meta http-equiv="Content-Type"  content= "text/html; charset=UTF-8" >  
7.         <mce:script type="text/javascript"  src= "js/jquery-1.3.2.min.js"  mce_src= "js/jquery-1.3.2.min.js" ></mce:script>  
8.         <mce:script type="text/javascript" ><!--  
9.     $(document).ready( function () {  
10.           
11.         //使用 Ajax 的方式 判断登录   
12.         $("#btn_login" ).click(  function () {  
13.               
14.             var  url =  'ajaxLogin.action' ;  
15.               
16.             alert("===" );  
17.               
18.             //获取表单值，并以json的数据形式保存到params中   
19.             var  params = {  
20.                 loginName:$("#loginName" ).val(),  
21.                 password:$("#password" ).val(),  
22.             }  
23.             //使用$.post方式       
24.             $.post(  
25.               
26.                 url,        //服务器要接受的url   
27.                   
28.                 params,     //传递的参数        
29.                   
30.                 function  cbf(data){  //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据   
31.                   
32.                     //alert(data);   
33.                     var  member = eval( "(" +data+ ")" );     //包数据解析为json 格式     
34.               
35.                     $('#result' ).html( "欢迎您：  " +member.name);  
36.                       
37.                 },   
38.                   
39.                 'json'    //数据传递的类型  json   
40.               
41.             );  
42.           
43.         });  
44.           
45.     });  
46. // --></mce:script>   
47.     </head>  
48.     <body>  
49.         <span>用户名：</span>  
50.         <input type="text"  id= "loginName"  name= "loginName" >  
51.         <br />  
52.   
53.         <span>密码：</span>  
54.         <input type="password"  name= "password"  id= "password" >  
55.         <br />  
56.   
57.         <input type="button"  id= "btn_login"  value= "Login"  />  
58.         <p>  
59.             这里显示ajax信息：  
60.             <br />  
61.             <span id="result" ></span>  
62.         </p>  
63.     </body>  
64. </html>  

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready( function() { //使用 Ajax 的方式 判断登录 $("#btn_login").click( function() { var url = 'ajaxLogin.action'; alert("==="); //获取表单值，并以json的数据形式保存到params中 var params = { loginName:$("#loginName").val(), password:$("#password").val(), } //使用$.post方式 $.post( url, //服务器要接受的url params, //传递的参数 function cbf(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据 //alert(data); var member = eval("("+data+")"); //包数据解析为json 格式 $('#result').html("欢迎您： "+member.name); }, 'json' //数据传递的类型 json ); }); }); // --></mce:script> </head> <body> <span>用户名：</span> <input type="text" id="loginName" name="loginName"> <br /> <span>密码：</span> <input type="password" name="password" id="password"> <br /> <input type="button" id="btn_login" value="Login" /> <p> 这里显示ajax信息： <br /> <span id="result"></span> </p> </body> </html>

 

第七步：在src 目录下加入 struts.xml ，并 配置相应的xml 文件，为 ajax 请求提供数据。 代码如下：

view plain copy to clipboard print ?

1. <? xml   version = "1.0"   encoding = "UTF-8"   ?>   
2. <!DOCTYPE struts PUBLIC  
3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
4.     "http://struts.apache.org/dtds/struts-2.0.dtd">   
5.   
6. < struts >   
7.   
8.     < package   name = "ajax"   extends = "json-default" >   
9.         < action   name = "ajaxLogin"   class = "qy.test.action.AjaxLoginAction" >   
10.   
11.             <!-- 返回类型为json 在sjon-default中定义 -->   
12.             < result   type = "json" >   
13.   
14.                 <!-- root的值对应要返回的值的属性 -->   
15.                 <!-- 这里的result值即是 对应action中的 result -->   
16.                 < param   name = "root" > result </ param >   
17.             </ result >   
18.         </ action >   
19.     </ package >   
20.   
21. </ struts >   

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name="ajax" extends="json-default"> <action name="ajaxLogin" class="qy.test.action.AjaxLoginAction"> <!-- 返回类型为json 在sjon-default中定义 --> <result type="json"> <!-- root的值对应要返回的值的属性 --> <!-- 这里的result值即是 对应action中的 result --> <param name="root">result</param> </result> </action> </package> </struts>

 

第八步：如果第四步没有加入commons-logging.jar 包，这里要记得加入

 

第九步： 发布运行。很不幸，你会发现一个错误，

java.lang.ClassNotFoundException: com.opensymphony.xwork2.util.TextUtils:

这是struts 的版本错误，因为用的 xwork2.1.6-core.jar 中不存在 TextUtils 类，这里把  xwork2.1.2-core.jar 也加到 classpath 中， xwork2.1.2-core.jar 中包含这个东西，我们用的是 xwork2.1.6 的 jar ，当要用到 TextUtils 时，就去 xwork2.1.2-core.jar 中找。