struts2+ajax+json

jopen 10年前發布 | 29K 次閱讀 Struts2 Web框架

在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. }  
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！