使用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> {
//业务逻辑对象
@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方式处理查询、删除，代码如下：
<%@ 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[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> ' +
'<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>
相关推荐
1. **用户交互性增强**：页面无需完全刷新，用户可以继续操作，提升了用户体验。 2. **效率提升**：只更新需要更新的部分，减少数据传输量，加快响应速度。 3. **后台处理**：允许服务器进行长时间处理，而不会阻塞...
在Java Web开发中，AJAX（Asynchronous JavaScript and XML）技术常常被用来增强用户体验，实现页面的异步更新。在这个“Java web ajax 登录”的示例中，我们主要探讨如何利用AJAX技术来构建一个实时验证用户登录...
标题“AJAX类似GOOGLE查询”和描述“AJAX实现类似GOOGLE查询”指的是一项使用AJAX（Asynchronous JavaScript and XML）技术来创建动态、交互性极强的网页搜索体验，类似于Google搜索引擎的实时查询功能。在Google...
为了增强用户体验，可以添加一些动画效果，比如使用CSS3的`transition`或`animation`属性，使得搜索结果的显示更加平滑。 这个Demo虽然简单，但它涵盖了Ajax基本的使用流程，包括客户端的Ajax请求、服务器端的响应...
Ajax的核心是利用JavaScript与服务器进行异步数据交换，增强了用户体验，使得页面交互更加流畅。本案例主要涉及两个关键组件：前端的jQuery库处理JSON数据，以及后端的Servlet来生成和输出JSON。 **jQuery与JSON...
这种方式减少了网络流量，提高了交互速度，增强了用户体验。 在"struts+json+ajax"这个项目中，可能涉及到以下几个方面： 1. **Struts的Action配置**：需要在struts-config.xml中配置对应的Action，指定其接收的...
在Web开发中，"servlet+ajax做的两个下拉列表联动"是一种常见的交互技术，用于增强用户界面的动态性。这种技术通常应用于表单中，当用户在一个下拉列表中选择一个选项时，另一个下拉列表会根据所选选项动态更新其...
### JS + AJAX 处理 Java 后台返回的 JSON 对象循环创建到表格的方法 在 Web 开发中，前后端分离已经成为一种趋势...这种方法不仅提高了数据处理的效率，同时也增强了用户界面的交互性和美观性。希望对读者有所帮助。
通过Ajax技术，我们可以无刷新地从服务器获取数据，增强了用户体验。在接收到JSON数据后，Jquery对数据进行解析，并根据分页逻辑对页面上的内容进行更新。 分页逻辑的关键点在于计算总页数，并根据当前页码确定数据...
在Web开发中，自动补全（Autocomplete）是一种常见的用户体验增强功能，它能够根据用户输入的部分文本，快速提供可能的匹配选项。本例子基于jQuery库和Servlet技术实现了一个自动补全功能，旨在帮助用户更高效地输入...
它支持多种数据格式的传递，包括JSON，这使得开发者能够轻松地实现AJAX（Asynchronous JavaScript and XML）功能，提高用户体验。在Struts2中，通过集成JSON插件，可以方便地将服务器端的数据转化为JSON格式，然后...
SSM框架，全称Spring、SpringMVC和MyBatis，是Java开发Web应用时常用的三大组件集成。...ECharts则是百度推出的一个开源的JavaScript图表库，用于生成各种数据...这样的技术结合不仅提升了项目的功能，也增强了用户体验。
10. 【可选】为了保证用户体验，页面初始加载完成以后，后续页面操作采用 Ajax 技 术实现异步提交和局部刷新，Ajax 交互的数据格式采用 Json 格式，使用合适的第三方工具 完成对象和 Json 字符串的互转，如 gson，...
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它采用完全独立于语言的文本格式，...通过导入这些jar包，开发者可以轻松地实现在客户端和服务器之间的JSON数据交换，从而提升应用的性能和用户体验。
在本项目中，前端通过jQuery的`$.ajax()`或`$.getJSON()`方法向后端发送JSON请求，后端SpringMVC控制器处理请求后，使用如Gson或Jackson等库将Java对象转换为JSON格式，返回给前端。前端接收到JSON数据后，通过...
6. JSON序列化与反序列化：使用Jackson或Gson处理JSON数据。 7. 前端交互：掌握Ajax技术实现前后端异步通信，提高页面响应速度。 四、调试与学习方法： 1. 观看视频演示：跟随视频逐步理解系统的功能实现。 2. 阅读...
4. **Swing皮肤包**: Swing是Java的图形用户界面（GUI）库，通过使用不同的皮肤包（如Nimbus或WindowsLookAndFeel），开发者可以定制应用的外观，提升用户体验。 5. **Ajax的JS包**: Ajax（异步JavaScript和XML）是...
使用jQuery、Prototype等库可以简化Ajax的使用，提高用户体验。 5. **Tomcat服务器**：作为最常用的JavaWeb应用服务器，Tomcat的安装、配置、部署应用、日志查看以及性能优化都是开发者必须掌握的技能。 6. **...
- **数据准备**：在Java应用中，可以使用POJO（Plain Old Java Object）或数组来存储图表数据，然后通过Gson或其他JSON库将其转换为JSON字符串。 - **服务器端输出**：将JSON字符串作为HTTP响应的一部分返回给...