使用ajax gson增强用户体验

来源：互联网发布：铝材下料软件编辑：程序博客网时间：2024/06/05 12:42

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代码

<?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>
<constantname="struts.enable.DynamicMethodInvocation"value="true"/>
<constantname="struts.devMode"value="true"/>
<constantname="struts.i18n.encoding"value="UTF-8"/>
<constantname="struts.objectFactory"value="spring"/>
<constantname="struts.objectFactory.spring.autoWire"value="type"/>
<constantname="struts.ui.theme"value="simple"></constant>
<packagename="film"namespace="/film"extends="struts-default">
<actionname="findFilm"class="filmAction"method="findFilm">
</action>
<actionname="insertFilm"class="filmAction"method="insertFilm">
</action>
<actionname="detailFilm"class="filmAction"method="detailFilm">
<resultname="success">/manager/updateFilm.jsp</result>
</action>
<actionname="updateFilm"class="filmAction"method="updateFilm">
</action>
<actionname="deleteFilm"class="filmAction"method="deleteFilm">
</action>
</package>
</struts>

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

Java代码

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 FilmActionextends ActionSupport implements ModelDriven<Film> {
//业务逻辑对象
@Autowired
private 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方式处理查询、删除，代码如下：

Html代码

<%@ 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"/>
<scripttype="text/javascript"src="<%=basePath %>/js/jquery.js"></script>
<scripttype="text/javascript"src="<%=basePath %>/js/jquery.form.js"></script>
<scripttype="text/javascript"src="<%=basePath %>/js/jquery.loadmask.js"></script>
<scripttype="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[i];
//在表格中创建新行
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> ' +
'<ahref="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 id="content">
<s:formid="filmForm"action="/film/findFilm"method="post">
<s:submitvalue=" 获取所有影片信息 "></s:submit>
</s:form>
<a href="<%=basePath %>/manager/insertFilm.jsp">添加影片信息</a><br/>
<tableid="filmTable"border="1"width="40%">
<tr>
<th>序号</th><th>影片名</th><th>操作</th>
</tr>
</table>
</div>
</body>
</html>

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

Html代码

<%@ 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"/>
<scripttype="text/javascript"src="<%=basePath %>/js/jquery.js"></script>
<scripttype="text/javascript"src="<%=basePath %>/js/jquery.form.js"></script>
<scripttype="text/javascript"src="<%=basePath %>/js/jquery.loadmask.js"></script>
<scripttype="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 id="content">
<s:formid="insertForm"action="/film/insertFilm"method="post">
<s:textfieldname="fname"value=""/>
<s:submitvalue=" 添加 "></s:submit>
</s:form>
<ahref="<%=basePath %>/manager/films.jsp">[返回影片列表]</a>
</div>
</body>
</html>

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

Html代码

<%@ 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"/>
<scripttype="text/javascript"src="<%=basePath %>/js/jquery.js"></script>
<scripttype="text/javascript"src="<%=basePath %>/js/jquery.form.js"></script>
<scripttype="text/javascript"src="<%=basePath %>/js/jquery.loadmask.js"></script>
<scripttype="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 id="content">
<s:formid="updateForm"action="/film/updateFilm"method="post">
<s:hiddenname="id"/>
<s:textfieldname="fname"/>
<s:submitvalue=" 修改 "></s:submit>
</s:form>
<ahref="<%=basePath %>/manager/films.jsp">[返回影片列表]</a>
</div>
</body>
</html>

0 0