使用ajax gson增强用户体验

HotStrong

使用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 version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"    "http://struts.apache.org/dtds/struts-2.0.dtd"><struts><constant name="struts.enable.DynamicMethodInvocation" value="true" /><constant name="struts.devMode" value="true" /><constant name="struts.i18n.encoding" value="UTF-8" /><constant name="struts.objectFactory" value="spring" /><constant name="struts.objectFactory.spring.autoWire" value="type" /><constant name="struts.ui.theme" value="simple"></constant><package name="film" namespace="/film" extends="struts-default"><!-- 获取所有影片 --><action name="findFilm" class="filmAction" method="findFilm"></action><!-- 添加影片 --><action name="insertFilm" class="filmAction" method="insertFilm"></action><!-- 获取影片详情 --><action name="detailFilm" class="filmAction" method="detailFilm"><result name="success">/manager/updateFilm.jsp</result></action><!-- 修改影片 --><action name="updateFilm" class="filmAction" method="updateFilm"></action><!-- 删除影片 --><action name="deleteFilm" class="filmAction" method="deleteFilm"></action></package></struts>  
4、在FilmAction中加入outputJson(...)方法用于向客户端输出JSON数据，在findFilm、insertFilm、updateFilm、deleteFilm方法中使用outputJson，代码如下：



package com.xxx.web.struts.action;import java.io.IOException;import java.io.PrintWriter;import java.util.List;import javax.servlet.http.HttpServletResponse;import org.apache.struts2.ServletActionContext;import org.springframework.beans.factory.annotation.Autowired;import com.google.gson.Gson;import com.opensymphony.xwork2.ActionSupport;import com.opensymphony.xwork2.ModelDriven;import com.xxx.pojo.Film;import com.xxx.service.FilmService;@SuppressWarnings("serial")public class FilmAction extends ActionSupport implements ModelDriven<Film> {//业务逻辑对象@Autowiredprivate FilmService filmService;//封装查询结果private List<Film> filmList;//封装页面提交的表单数据private Film film = new Film();/** * 获取所有的电影 * @return * @throws Exception */public String findFilm() throws Exception {this.filmList = this.filmService.getAllFilm();this.outputJson(this.filmList);return null;}/** * 根据影片ID获取影片信息 * @return * @throws Exception */public String detailFilm() throws Exception {int id = film.getId().intValue();Film film = this.filmService.getFilmById(id);this.film.setFname(film.getFname());return SUCCESS;}/** * 添加影片 * @return * @throws Exception */public String insertFilm() {String result = "发布影片成功！";try {this.filmService.insertFilm(film);} catch (Exception e) {result = "发布影片失败！";}this.outputJson(result);return null;}/** * 修改影片 * @return * @throws Exception */public String updateFilm() {String result = "修改影片成功！";try {this.filmService.updateFilm(film);} catch (Exception e) {result = "修改影片失败！";}this.outputJson(result);return null;}/** * 删除影片 * @return * @throws Exception */public String deleteFilm() {String result = "删除影片成功！";try {int id = film.getId().intValue();this.filmService.deleteFilm(id);}catch (Exception e) {result = "删除影片失败！";}this.outputJson(result);return null;}/** * 输出JSON信息 * @param jsonObj */private void outputJson(Object jsonObj){HttpServletResponse response = ServletActionContext.getResponse();response.setContentType("application/json;charset=utf-8");response.setHeader("Cache-Control", "no-cache");try {PrintWriter pw = response.getWriter();//将Java对象转换为JSON字符串String gsonStr = new Gson().toJson(jsonObj);//输出JSON字符串pw.print(gsonStr);pw.flush();pw.close();} catch (IOException e) {System.out.println("输出GSON出错：" + e);}}public Film getModel() {return film;}public List<Film> getFilmList() {return filmList;}public void setFilmList(List<Film> filmList) {this.filmList = filmList;}}  
5、修改films.jsp页面代码，采用jQuery的ajax方式处理查询、删除，代码如下：
 

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8" %><%@taglib uri="/struts-tags" prefix="s" %><%@ taglib prefix="security"uri="http://www.springframework.org/security/tags"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>信息操作</title>    <link href="<%=basePath %>/js/jquery.loadmask.css" rel="stylesheet" type="text/css" />    <script type="text/javascript" src="<%=basePath %>/js/jquery.js"></script>    <script type="text/javascript" src="<%=basePath %>/js/jquery.form.js"></script><script type="text/javascript" src="<%=basePath %>/js/jquery.loadmask.js"></script>    <script type="text/javascript">        $(document).ready(function() {//采用jQuery的Ajax方式提交表单    $('#filmForm').submit(function() {         $(this).ajaxSubmit({         beforeSubmit:  function(){                //提交表单处理期间，屏蔽整个窗口        $('#content').mask("正在提交数据，请稍候。");        //关闭提交按钮        $('input[name=submit]').attr("disabled", true);                },        dataType:  'json',        //处理服务器响应的函数        success: function showResponse(responseObj, statusText, xhr, $form){                //取消窗口屏蔽        $('#content').unmask();                //打开提交按钮        $('input[name=submit]').attr("disabled", false);                //将服务器返回的影片信息添加到表格中        var tableObj = document.getElementById('filmTable');                //清除表格中原有数据        var rowLength = tableObj.rows.length;        for(var i = 1; i < rowLength; i++){        tableObj.deleteRow(1);        }                //添加新的数据        for(var i = 0; i < responseObj.length; i++){                //读取影片对象        var filmObj = responseObj;                //在表格中创建新行        var newRow = tableObj.insertRow(tableObj.rows.length);        //在新行中创建3个单元格        var cell1 = newRow.insertCell(0);        var cell2 = newRow.insertCell(1);        var cell3 = newRow.insertCell(2);        //给单元格加入数据        cell1.innerHTML = '' + (i + 1);        cell2.innerHTML = filmObj.fname;        cell3.innerHTML = '<a href="<%=basePath %>/film/detailFilm?id=' +         filmObj.id + '">[修改]</a> ' +         '<a href="javascript:deleteFilm(\'<%=basePath %>/film/deleteFilm?id=' +         filmObj.id + '\');">[删除]</a>';        }                }        });        return false;    });   });/*ajax方式提交删除*/   function deleteFilm(deleteUrl){      if(confirm("是否删除影片？")){     $.ajax({type:'get',url:deleteUrl, data:null, datatype:'json',success: function(responseObj){alert(responseObj);}}); }      }        </script>  </head>  <body>  <!-- 布局DIV -->  <div id="content">    <s:form id="filmForm" action="/film/findFilm" method="post">    <s:submit value=" 获取所有影片信息 "></s:submit>    </s:form><a href="<%=basePath %>/manager/insertFilm.jsp">添加影片信息</a><br />   <table id="filmTable" border="1" width="40%">   <tr>   <th>序号</th><th>影片名</th><th>操作</th>   </tr></table>  </div>  </body></html> 
 
6、修改insertFilm.jsp页面代码，采用jQuery的ajax方式处理添加操作，代码如下：
 

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8" %><%@taglib uri="/struts-tags" prefix="s" %><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>添加影片</title>    <link href="<%=basePath %>/js/jquery.loadmask.css" rel="stylesheet" type="text/css" />    <script type="text/javascript" src="<%=basePath %>/js/jquery.js"></script>    <script type="text/javascript" src="<%=basePath %>/js/jquery.form.js"></script><script type="text/javascript" src="<%=basePath %>/js/jquery.loadmask.js"></script>    <script type="text/javascript">        $(document).ready(function() {//采用jQuery的Ajax方式提交表单    $('#insertForm').submit(function() {         $(this).ajaxSubmit({         beforeSubmit:  function(){                //提交表单处理期间，屏蔽整个窗口        $('#content').mask("正在提交数据，请稍候。");        //关闭提交按钮        $('input[name=submit]').attr("disabled", true);                },        dataType:  'json',        //处理服务器响应的函数        success: function showResponse(responseObj, statusText, xhr, $form){                //取消窗口屏蔽        $('#content').unmask();                //打开提交按钮        $('input[name=submit]').attr("disabled", false);                //显示服务器返回的信息        alert(responseObj);                }        });         return false;    }); });    </script>  </head>  <body>    <!-- 布局DIV -->  <div id="content">    <s:form id="insertForm" action="/film/insertFilm" method="post">    <s:textfield name="fname" value="" />    <s:submit value=" 添加 "></s:submit>    </s:form>    <a href="<%=basePath %>/manager/films.jsp">[返回影片列表]</a>    </div>  </body></html>  
7、修改updateFilm.jsp页面代码，采用jQuery的ajax方式处理修改操作，代码如下：
 
 

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8" %><%@taglib uri="/struts-tags" prefix="s" %><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>修改影片</title>    <link href="<%=basePath %>/js/jquery.loadmask.css" rel="stylesheet" type="text/css" />    <script type="text/javascript" src="<%=basePath %>/js/jquery.js"></script>    <script type="text/javascript" src="<%=basePath %>/js/jquery.form.js"></script><script type="text/javascript" src="<%=basePath %>/js/jquery.loadmask.js"></script>    <script type="text/javascript">        $(document).ready(function() {//采用jQuery的Ajax方式提交表单    $('#updateForm').submit(function() {         $(this).ajaxSubmit({         beforeSubmit:  function(){                //提交表单处理期间，屏蔽整个窗口        $('#content').mask("正在提交数据，请稍候。");        //关闭提交按钮        $('input[name=submit]').attr("disabled", true);                },        dataType:  'json',        //处理服务器响应的函数        success: function showResponse(responseObj, statusText, xhr, $form){                //取消窗口屏蔽        $('#content').unmask();                //打开提交按钮        $('input[name=submit]').attr("disabled", false);                //显示服务器返回的信息        alert(responseObj);                }        });         return false;    }); });        </script>  </head>  <body>    <!-- 布局DIV -->  <div id="content">    <s:form id="updateForm" action="/film/updateFilm" method="post">    <s:hidden name="id" />    <s:textfield name="fname" />    <s:submit value=" 修改 "></s:submit>    </s:form>    <a href="<%=basePath %>/manager/films.jsp">[返回影片列表]</a>    </div>  </body></html>