Struts2 + JQuery + JSON实现AJAX

网上关于这方面的资料也不少,但多半是struts1的,在Struts2中使用JSON可以更容易实现数据的异步传输。
      先做好准备工作:
      1.Struts2相关lib, 注意将struts2 lib下面的以json开头的包也加入到工程。
      2.JSON Plugin,它可以将Struts2 Action中的结果直接返回为JSON。
     下载地址:http://jsonplugin.googlecode.com/files/jsonplugin-0.34.jar (支持struts2.1.6及以上版本)。
      3.JQuery,JS的一个lib. 下载地址:http://www.jquery.com (最新版本为1.3.2)。
 
      准备工作都做好之后,我们可以开始了。建一个WEB工程,把相关的包加入到工程。我们需要做的就是三件事:
      一、准备一个JSP页面用于提交ajax请求,这里我使用了JQuery的$.getJSON(url,params,function callback(data))
     函数提交ajax请求到指定url,并且携带参数params,最后用一个回调函数callback处理请求返回结果 data;
      二、一个处理请求的Action类,并在struts.xml文件中做相应配置:写一个action类处理ajax请求数据,
     并将返回结果封装成一个 JSONObject对象返回给请求页面。同时在struts.xml中配置对应action,
     指明其返回类型为json并使其package的 extends为json-default,并将要返回请求页面的数据放在名为root的param中,
     如<param name="root">result</param>。
      三、接受请求返回结果:使用JS的eval方法将返回结果data转换成JSON对象,并处理返回结果。
   
    具体参见以下代码:
    // login.jsp 使用getJSON方法提交ajax请求,并处理请求返回结果。
    注意请求的url为login.html这是因为我将 struts2.preperties中的struts.action.extension改成了htm,
    默认为action。l
Html代码
1. <%@ page language="java" contentType="text/html; charset=UTF-8" 
2.     pageEncoding="UTF-8"%> 
3. <%@ taglib uri="/struts-tags" prefix="s"%> 
4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
5. <html> 
6. <head> 
7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
8. <title><s:text name="page.title.login" /></title> 
9. <script type="text/javascript" src="jquery-1.3.2.js"></script> 
10. <script type="text/javascript" language="javascript"> 
11. $(document).ready(function(){ 
12.     $("#login").click(function(){ 
13.         login(); 
14.         }); 
15. }); 
16.  
17. function login(){ 
18.     var url = "login.html"; 
19.     var params = {"user.logName":$("#name").attr("value"),"user.password":$("#password").attr("value")}; 
20.      
21.     $.getJSON(url,params,function callback(data){ 
22.         // convert to json object 
23.         var user = eval("("+data+")");// 
24.          
25.          
26.         $("#result").each(function(){ 
27.             $(this).html('welcome ,' + user.name); 
28.             }); 
29.         }); 
30.     } 
31. </script> 
32. </head> 
33. <body> 
34. <s:actionmessage/> 
35. <form  method="post" id="form"><s:text 
36.     name="user.label.name" />:<input type="textbox" name="user.logName" id="name" 
37.     value='${param["user.logName"]}' /><br> 
38. <s:text name="user.label.password" />:<input type="password" id="password" 
39.     name="user.password" /><br> 
40. <input type="button" id="login" value='<s:text name="button.label.login" />' /></form> 
41. <div id="result"> 
42.      
43. </div> 
44. </body> 
45. </html> 
 
    // struts.xml  注意package的extends属性与result的type属性。result为userAction的一个属性,这里将结果返回给ajax的请求页面。
  
Java代码
1. <package name="login" namespace="/" extends="json-default" > 
2.         <action name="login" class="userAction" method="login" > 
3.             <result type="json"> 
4.                 <param name="root">result</param> 
5.             </result> 
6.         </action> 
7. </package> 
 
     // UserAction.java    只需要看login()方法,另外读者需要自己增加一个User的实体类用来获取请求数据。
    这里我只将user的logName与password封装到了一个map以JSONObject的方式返回(因为还有其它空属性没必要返回)。
    也可以直接调用JSONObject.fromObject (user)将整个user对象返回给JSON。注意最后返回的并不是一个JSONObject对象,
    而是一String类型的result。这里的 result须与action中的<param name="root">中配置的一致。
    这里代码写的比较简单,没有增加对用户名密码的验证。
   
Java代码
1. package com.word.action; 
2.  
3. import java.util.HashMap; 
4. import java.util.List; 
5. import java.util.Map; 
6.  
7. import com.word.vo.User; 
8.  
9. import net.sf.json.JSONObject; 
10.  
11. import org.apache.poi.hssf.record.formula.eval.AddEval; 
12. import org.apache.struts2.components.ActionError; 
13. import org.apache.struts2.components.ActionMessage; 
14. import org.apache.struts2.interceptor.validation.JSONValidationInterceptor; 
15.  
16. import com.opensymphony.xwork2.ActionSupport; 
17. import com.word.service.IUserService; 
18.  
19. public class UserAction extends ActionSupport { 
20.     private User user; 
21.     private String result; 
22.      
23.     public String getResult(){ 
24.         return result; 
25.     } 
26.      
27.     public void setResult(String result){ 
28.         this.result = result; 
29.     } 
30.  
31.     public User getUser() { 
32.         return user; 
33.     } 
34.  
35.     public void setUser(User user) { 
36.         this.user = user; 
37.     } 
38.  
39.     private IUserService userService; 
40.  
41.     public void setUserService(IUserService userService) { 
42.         this.userService = userService; 
43.     } 
44.  
45.     public String login() throws Exception { 
46.          
47.         Map map = new HashMap(); 
48.         map.put("name", user.getLogName()); 
49.         map.put("password",user.getPassword()); 
50.         JSONObject obj = JSONObject.fromObject(map); 
51.          
52.          
53.         result = obj.toString(); 
54.          
55.         return SUCCESS; 
56.     } 
57.  
58.     /**
59.      * get User list
60.      */ 
61.     public List<User> findAll() throws Exception { 
62.         return userService.findAll(); 
63.     } 
64.  
65.     /**
66.      * get User by id
67.      * 
68.      * @param id
69.      * @throw Exception
70.      */ 
71.     public User getUserById(Long id) throws Exception { 
72.         return userService.getUserById(id); 
73.     } 
74.  
75.     /**
76.      * create User
77.      * 
78.      * @param user
79.      * @throw Exception
80.      */ 
81.     public String createUser() { 
82.         clearErrorsAndMessages(); 
83.          
84.         if(user.getLogName().trim().equals("") ){ 
85.             this.addActionMessage(getText("error.user.name")); 
86.             return INPUT; 
87.         } 
88.         if(user.getPassword().trim().equals("") ){ 
89.             this.addActionMessage(getText("error.user.password")); 
90.             return INPUT; 
91.         } 
92.         try{ 
93.             userService.createUser(user); 
94.             this.addActionMessage(getText("user.message.create")); 
95.             return INPUT; 
96.         }catch(Exception e){ 
97.             this.addActionMessage("注册用户失败"); 
98.             return INPUT; 
99.         } 
100.     } 
101.  
102.     /**
103.      * update User
104.      * 
105.      * @param user
106.      * @throw Exception
107.      */ 
108.     public void updateUser() throws Exception { 
109.         userService.updateUser(user); 
110.     } 
111.  
112.     /**
113.      * delete User by id
114.      * 
115.      * @param id
116.      * @throw Exception
117.      */ 
118.     public void deleteUser(Long id) throws Exception { 
119.         userService.deleteUser(id); 
120.     } 
121.  
122. } 
 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值