登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学无止境

一点积累,与大家分享

 
 
 

日志

 
 

Struts2 + JQuery + JSON实现AJAX  

2010-03-25 12:01:45|  分类: java技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

网上关于这方面的资料也不少,但多半是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代码 Struts2 + JQuery + JSON实现AJAX - 积累在于坚持 - 学无止境

  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>  

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib uri="/struts-tags" prefix="s"%><!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"><title><s:text name="page.title.login" /></title><script type="text/javascript" src="jquery-1.3.2.js"></script><script type="text/javascript" language="javascript">$(document).ready(function(){ $("#login").click(function(){ login(); });});function login(){ var url = "login.html"; var params = {"user.logName":$("#name").attr("value"),"user.password":$("#password").attr("value")}; $.getJSON(url,params,function callback(data){ // convert to json object var user = eval("("+data+")");// $("#result").each(function(){ $(this).html('welcome ,' + user.name); }); }); }</script></head><body><s:actionmessage/><form method="post" id="form"><s:text name="user.label.name" />:<input type="textbox" name="user.logName" id="name" value='${param["user.logName"]}' /><br><s:text name="user.label.password" />:<input type="password" id="password" name="user.password" /><br><input type="button" id="login" value='<s:text name="button.label.login" />' /></form><div id="result"> </div></body></html>

 

    // struts.xml  注意package的extends属性与result的type属性。result为userAction的一个属性,这里将结果返回给ajax的请求页面。

  

Java代码 Struts2 + JQuery + JSON实现AJAX - 积累在于坚持 - 学无止境

  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>  

<package name="login" namespace="/" extends="json-default" > <action name="login" class="userAction" method="login" > <result type="json"> <param name="root">result</param> </result> </action></package>

 

     // UserAction.java    只需要看login()方法,另外读者需要自己增加一个User的实体类用来获取请求数据。这里我只将user的logName与password封装到了一个map以JSONObject的方式返回(因为还有其它空属性没必要返回)。也可以直接调用JSONObject.fromObject(user)将整个user对象返回给JSON。注意最后返回的并不是一个JSONObject对象,而是一String类型的result。这里的result须与action中的<param name="root">中配置的一致。这里代码写的比较简单,没有增加对用户名密码的验证。

   

Java代码 Struts2 + JQuery + JSON实现AJAX - 积累在于坚持 - 学无止境

  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. }  

  评论这张
 
阅读(630)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018