使用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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值