使用ajax gson增强用户体验

1、技术目标

 

• 为项目加入gson支持
• 在struts2的Action中使用gson输出json格式数据
• 采用jQuery的ajax方式完成CRUD操作

 

注意：本文所用项目为"影片管理"，参看

http://hotstrong.iteye.com/blog/1156785

 

2、什么是gson？

 

Gson是Google的一个开源项目

可以将Java对象转换成JSON

也可以将JSON转换成Java对象

 

Gson有两个重要的对象

Gson

GsonBuilder

 

Gson对象有两个基本方法

toJson() – 转换java对象到JSON

fromJson() – 转换JSON到java对象

 

3、使用准备

 

3.1）在项目中增如下jar包(gson框架所需jar包)，本文已提供下载：

 

gson-1.5.jar

 

3.2）站点根路径下创建文件夹js(放置javascript代码)，js文件夹下再创建images文件夹，放置图片素材，导入以下jQuery相关文件：

 

jquery.form.js

jquery.loadmask.css

jquery.loadmask.js

jquery.js

 

注意：本文所用jQuery版本为v1.4.2，js、css文件以及图片素材已提供下载

 

3.3）在项目中的struts.xml文件中修改Action配置，将"获取所有影片"、"添加影片"、"修改影片"、"删除影片"的<result ...>配置删除，修改后的文件如下：

 

 

Xml代码  

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.         <constant name="struts.enable.DynamicMethodInvocation" value="true" />  
8.         <constant name="struts.devMode" value="true" />  
9.         <constant name="struts.i18n.encoding" value="UTF-8" />  
10.         <constant name="struts.objectFactory" value="spring" />  
11.         <constant name="struts.objectFactory.spring.autoWire" value="type" />  
12.         <constant name="struts.ui.theme" value="simple"></constant>  
13.         <package name="film" namespace="/film" extends="struts-default">  
14.             <!-- 获取所有影片 -->  
15.             <action name="findFilm" class="filmAction" method="findFilm">  
16.             </action>  
17.             <!-- 添加影片 -->  
18.             <action name="insertFilm" class="filmAction" method="insertFilm">  
19.             </action>  
20.             <!-- 获取影片详情 -->  
21.             <action name="detailFilm" class="filmAction" method="detailFilm">  
22.                 <result name="success">/manager/updateFilm.jsp</result>  
23.             </action>  
24.             <!-- 修改影片 -->  
25.             <action name="updateFilm" class="filmAction" method="updateFilm">  
26.             </action>  
27.             <!-- 删除影片 -->  
28.             <action name="deleteFilm" class="filmAction" method="deleteFilm">  
29.             </action>  
30.         </package>  
31.     </struts>  

 

 

4、在FilmAction中加入outputJson(...)方法用于向客户端输出JSON数据，在findFilm、insertFilm、updateFilm、deleteFilm方法中使用outputJson，代码如下：

 

 

Java代码  

1. package com.xxx.web.struts.action;  
2.   
3. import java.io.IOException;  
4. import java.io.PrintWriter;  
5. import java.util.List;  
6. import javax.servlet.http.HttpServletResponse;  
7. import org.apache.struts2.ServletActionContext;  
8. import org.springframework.beans.factory.annotation.Autowired;  
9. import com.google.gson.Gson;  
10. import com.opensymphony.xwork2.ActionSupport;  
11. import com.opensymphony.xwork2.ModelDriven;  
12. import com.xxx.pojo.Film;  
13. import com.xxx.service.FilmService;  
14.   
15. @SuppressWarnings("serial")  
16. public class FilmAction extends ActionSupport implements ModelDriven<Film> {  
17.   
18.     //业务逻辑对象  
19.     @Autowired  
20.     private FilmService filmService;  
21.       
22.     //封装查询结果  
23.     private List<Film> filmList;  
24.       
25.     //封装页面提交的表单数据  
26.     private Film film = new Film();  
27.       
28.     /** 
29.      * 获取所有的电影 
30.      * @return 
31.      * @throws Exception 
32.      */  
33.     public String findFilm() throws Exception {  
34.           
35.         this.filmList = this.filmService.getAllFilm();  
36.         this.outputJson(this.filmList);  
37.           
38.         return null;  
39.     }  
40.       
41.     /** 
42.      * 根据影片ID获取影片信息 
43.      * @return 
44.      * @throws Exception 
45.      */  
46.     public String detailFilm() throws Exception {  
47.         int id = film.getId().intValue();  
48.         Film film = this.filmService.getFilmById(id);  
49.         this.film.setFname(film.getFname());  
50.         return SUCCESS;  
51.     }  
52.       
53.     /** 
54.      * 添加影片 
55.      * @return 
56.      * @throws Exception 
57.      */  
58.     public String insertFilm() {  
59.           
60.         String result = "发布影片成功！";  
61.         try {  
62.               
63.             this.filmService.insertFilm(film);  
64.               
65.         } catch (Exception e) {  
66.               
67.             result = "发布影片失败！";  
68.               
69.         }  
70.           
71.         this.outputJson(result);  
72.           
73.         return null;  
74.     }  
75.       
76.     /** 
77.      * 修改影片 
78.      * @return 
79.      * @throws Exception 
80.      */  
81.     public String updateFilm() {  
82.           
83.         String result = "修改影片成功！";  
84.         try {  
85.               
86.             this.filmService.updateFilm(film);  
87.               
88.         } catch (Exception e) {  
89.               
90.             result = "修改影片失败！";  
91.               
92.         }  
93.           
94.         this.outputJson(result);  
95.           
96.         return null;  
97.     }  
98.       
99.     /** 
100.      * 删除影片 
101.      * @return 
102.      * @throws Exception 
103.      */  
104.     public String deleteFilm() {  
105.           
106.         String result = "删除影片成功！";  
107.         try {  
108.               
109.               
110.             int id = film.getId().intValue();  
111.             this.filmService.deleteFilm(id);  
112.               
113.         }catch (Exception e) {  
114.               
115.             result = "删除影片失败！";  
116.         }  
117.           
118.         this.outputJson(result);  
119.           
120.         return null;  
121.     }  
122.       
123.     /** 
124.      * 输出JSON信息 
125.      * @param jsonObj 
126.      */  
127.     private void outputJson(Object jsonObj){  
128.           
129.         HttpServletResponse response = ServletActionContext.getResponse();  
130.         response.setContentType("application/json;charset=utf-8");  
131.         response.setHeader("Cache-Control", "no-cache");  
132.           
133.         try {  
134.               
135.             PrintWriter pw = response.getWriter();  
136.             //将Java对象转换为JSON字符串  
137.             String gsonStr = new Gson().toJson(jsonObj);  
138.             //输出JSON字符串  
139.             pw.print(gsonStr);  
140.               
141.             pw.flush();  
142.             pw.close();  
143.               
144.         } catch (IOException e) {  
145.             System.out.println("输出GSON出错：" + e);  
146.         }  
147.     }  
148.       
149.     public Film getModel() {  
150.         return film;  
151.     }  
152.   
153.     public List<Film> getFilmList() {  
154.         return filmList;  
155.     }  
156.   
157.     public void setFilmList(List<Film> filmList) {  
158.         this.filmList = filmList;  
159.     }  
160.   
161. }  

 

 

5、修改films.jsp页面代码，采用jQuery的ajax方式处理查询、删除，代码如下：

 

 

Html代码  

1. <%@ page language="java" contentType="text/html; charset=utf-8"  
2. pageEncoding="utf-8" %>  
3. <%@taglib uri="/struts-tags" prefix="s" %>  
4. <%@ taglib prefix="security"  
5.     uri="http://www.springframework.org/security/tags"%>  
6. <%  
7. String path = request.getContextPath();  
8. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;  
9. %>  
10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
11. <html>  
12.   <head>  
13.     <title>信息操作</title>  
14.     <link href="<%=basePath %>/js/jquery.loadmask.css" rel="stylesheet" type="text/css" />  
15.     <script type="text/javascript" src="<%=basePath %>/js/jquery.js"></script>  
16.     <script type="text/javascript" src="<%=basePath %>/js/jquery.form.js"></script>  
17.     <script type="text/javascript" src="<%=basePath %>/js/jquery.loadmask.js"></script>  
18.     <script type="text/javascript">  
19.           
20.         $(document).ready(function() {  
21.               
22.         //采用jQuery的Ajax方式提交表单  
23.             $('#filmForm').submit(function() {   
24.                     $(this).ajaxSubmit({   
25.                             beforeSubmit:  function(){  
26.                               
27.                                 //提交表单处理期间，屏蔽整个窗口  
28.                                 $('#content').mask("正在提交数据，请稍候。");  
29.                                 //关闭提交按钮  
30.                                 $('input[name=submit]').attr("disabled", true);  
31.                                   
32.                             },  
33.                             dataType:  'json',  
34.                             //处理服务器响应的函数  
35.                             success: function showResponse(responseObj, statusText, xhr, $form){  
36.                                   
37.                                 //取消窗口屏蔽  
38.                                 $('#content').unmask();  
39.                                   
40.                                 //打开提交按钮  
41.                                 $('input[name=submit]').attr("disabled", false);  
42.                                   
43.                                 //将服务器返回的影片信息添加到表格中  
44.                                 var tableObj = document.getElementById('filmTable');  
45.                                   
46.                                 //清除表格中原有数据  
47.                                 var rowLength = tableObj.rows.length;  
48.                                 for(var i = 1; i < rowLength; i++){  
49.                                     tableObj.deleteRow(1);  
50.                                 }  
51.                                   
52.                                 //添加新的数据  
53.                                 for(var i = 0; i < responseObj.length; i++){  
54.                                       
55.                                     //读取影片对象  
56.                                     var filmObj = responseObj[i];  
57.                                       
58.                                     //在表格中创建新行  
59.                                     var newRow = tableObj.insertRow(tableObj.rows.length);  
60.                                     //在新行中创建3个单元格  
61.                                     var cell1 = newRow.insertCell(0);  
62.                                     var cell2 = newRow.insertCell(1);  
63.                                     var cell3 = newRow.insertCell(2);  
64.                                     //给单元格加入数据  
65.                                     cell1.innerHTML = '' + (i + 1);  
66.                                     cell2.innerHTML = filmObj.fname;  
67.                                     cell3.innerHTML = '<a href="<%=basePath %>/film/detailFilm?id=' +   
68.                                     filmObj.id + '">[修改]</a>&nbsp;' +   
69.                                     '<a href="javascript:deleteFilm(\'<%=basePath %>/film/deleteFilm?id=' +   
70.                                     filmObj.id + '\');">[删除]</a>';  
71.                                 }  
72.                                   
73.                             }  
74.                     });  
75.                     return false;   
76.             });  
77.               
78.     });  
79.       
80.     /*ajax方式提交删除*/  
81.     function deleteFilm(deleteUrl){  
82.           
83.         if(confirm("是否删除影片？")){  
84.           
85.             $.ajax({  
86.                 type:'get',  
87.                 url:deleteUrl,   
88.                 data:null,   
89.                 datatype:'json',  
90.                 success: function(responseObj){  
91.                     alert(responseObj);  
92.                 }  
93.             });   
94.         }  
95.           
96.     }  
97.       
98.     </script>  
99.   </head>  
100.   <body>  
101.   <!-- 布局DIV -->  
102.   <div id="content">  
103.     <s:form id="filmForm" action="/film/findFilm" method="post">  
104.         <s:submit value=" 获取所有影片信息 "></s:submit>  
105.     </s:form>  
106.     <a href="<%=basePath %>/manager/insertFilm.jsp">添加影片信息</a><br />      
107.     <table id="filmTable" border="1" width="40%">  
108.         <tr>  
109.             <th>序号</th><th>影片名</th><th>操作</th>  
110.         </tr>   
111.     </table>  
112.   </div>  
113.   </body>  
114. </html>  

 

 

6、修改insertFilm.jsp页面代码，采用jQuery的ajax方式处理添加操作，代码如下：

 

 

Html代码  

1. <%@ page language="java" contentType="text/html; charset=utf-8"  
2. pageEncoding="utf-8" %>  
3. <%@taglib uri="/struts-tags" prefix="s" %>  
4. <%  
5. String path = request.getContextPath();  
6. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;  
7. %>  
8.   
9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
10. <html>  
11.   <head>  
12.     <title>添加影片</title>  
13.     <link href="<%=basePath %>/js/jquery.loadmask.css" rel="stylesheet" type="text/css" />  
14.     <script type="text/javascript" src="<%=basePath %>/js/jquery.js"></script>  
15.     <script type="text/javascript" src="<%=basePath %>/js/jquery.form.js"></script>  
16.     <script type="text/javascript" src="<%=basePath %>/js/jquery.loadmask.js"></script>  
17.     <script type="text/javascript">  
18.           
19.         $(document).ready(function() {  
20.               
21.             //采用jQuery的Ajax方式提交表单  
22.             $('#insertForm').submit(function() {   
23.                     $(this).ajaxSubmit({   
24.                             beforeSubmit:  function(){  
25.                               
26.                                 //提交表单处理期间，屏蔽整个窗口  
27.                                 $('#content').mask("正在提交数据，请稍候。");  
28.                                 //关闭提交按钮  
29.                                 $('input[name=submit]').attr("disabled", true);  
30.                                   
31.                             },  
32.                             dataType:  'json',  
33.                             //处理服务器响应的函数  
34.                             success: function showResponse(responseObj, statusText, xhr, $form){  
35.                                   
36.                                 //取消窗口屏蔽  
37.                                 $('#content').unmask();  
38.                                   
39.                                 //打开提交按钮  
40.                                 $('input[name=submit]').attr("disabled", false);  
41.                                   
42.                                 //显示服务器返回的信息  
43.                                 alert(responseObj);  
44.                                   
45.                             }  
46.                     });   
47.                     return false;   
48.             });   
49.   
50.     });  
51.     </script>  
52.   </head>  
53.   <body>  
54.     <!-- 布局DIV -->  
55.     <div id="content">  
56.         <s:form id="insertForm" action="/film/insertFilm" method="post">  
57.             <s:textfield name="fname" value="" />  
58.             <s:submit value=" 添加 "></s:submit>  
59.         </s:form>  
60.         <a href="<%=basePath %>/manager/films.jsp">[返回影片列表]</a>  
61.     </div>  
62.   </body>  
63. </html>  

 

 

7、修改updateFilm.jsp页面代码，采用jQuery的ajax方式处理修改操作，代码如下：

 

 

 

Html代码  

1. <%@ page language="java" contentType="text/html; charset=utf-8"  
2. pageEncoding="utf-8" %>  
3. <%@taglib uri="/struts-tags" prefix="s" %>  
4. <%  
5. String path = request.getContextPath();  
6. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;  
7. %>  
8.   
9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
10. <html>  
11.   <head>  
12.     <title>修改影片</title>  
13.     <link href="<%=basePath %>/js/jquery.loadmask.css" rel="stylesheet" type="text/css" />  
14.     <script type="text/javascript" src="<%=basePath %>/js/jquery.js"></script>  
15.     <script type="text/javascript" src="<%=basePath %>/js/jquery.form.js"></script>  
16.     <script type="text/javascript" src="<%=basePath %>/js/jquery.loadmask.js"></script>  
17.     <script type="text/javascript">  
18.           
19.         $(document).ready(function() {  
20.               
21.             //采用jQuery的Ajax方式提交表单  
22.             $('#updateForm').submit(function() {   
23.                     $(this).ajaxSubmit({   
24.                             beforeSubmit:  function(){  
25.                               
26.                                 //提交表单处理期间，屏蔽整个窗口  
27.                                 $('#content').mask("正在提交数据，请稍候。");  
28.                                 //关闭提交按钮  
29.                                 $('input[name=submit]').attr("disabled", true);  
30.                                   
31.                             },  
32.                             dataType:  'json',  
33.                             //处理服务器响应的函数  
34.                             success: function showResponse(responseObj, statusText, xhr, $form){  
35.                                   
36.                                 //取消窗口屏蔽  
37.                                 $('#content').unmask();  
38.                                   
39.                                 //打开提交按钮  
40.                                 $('input[name=submit]').attr("disabled", false);  
41.                                   
42.                                 //显示服务器返回的信息  
43.                                 alert(responseObj);  
44.                                   
45.                             }  
46.                     });   
47.                     return false;   
48.             });   
49.   
50.     });  
51.       
52.     </script>  
53.   </head>  
54.   <body>  
55.     <!-- 布局DIV -->  
56.     <div id="content">  
57.         <s:form id="updateForm" action="/film/updateFilm" method="post">  
58.             <s:hidden name="id" />  
59.             <s:textfield name="fname" />  
60.             <s:submit value=" 修改 "></s:submit>  
61.         </s:form>  
62.         <a href="<%=basePath %>/manager/films.jsp">[返回影片列表]</a>  
63.     </div>  
64.   </body>  
65. </html>