`
HotStrong
  • 浏览: 509107 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

使用ajax gson增强用户体验

阅读更多

 

 

 

使用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>&nbsp;' + 
			        				'<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>

 

 

 

 

6
0
分享到:
评论
3 楼 zyaaa117203 2016-11-27  
请问使用ajax之后那个spring security的权限管理配置还能使用吗
2 楼 yuanyuangu 2014-07-23  
1 楼 boss5518831534 2012-04-05  
Thank for sharing

相关推荐

    ajax相关的jar包

    1. **用户交互性增强**:页面无需完全刷新,用户可以继续操作,提升了用户体验。 2. **效率提升**:只更新需要更新的部分,减少数据传输量,加快响应速度。 3. **后台处理**:允许服务器进行长时间处理,而不会阻塞...

    Java web ajax 登录

    在Java Web开发中,AJAX(Asynchronous JavaScript and XML)技术常常被用来增强用户体验,实现页面的异步更新。在这个“Java web ajax 登录”的示例中,我们主要探讨如何利用AJAX技术来构建一个实时验证用户登录...

    AJAX类似GOOGLE查询

    标题“AJAX类似GOOGLE查询”和描述“AJAX实现类似GOOGLE查询”指的是一项使用AJAX(Asynchronous JavaScript and XML)技术来创建动态、交互性极强的网页搜索体验,类似于Google搜索引擎的实时查询功能。在Google...

    java web ajax 入门Demo 百度 Google 搜索 提示 ajax 模糊查询

    为了增强用户体验,可以添加一些动画效果,比如使用CSS3的`transition`或`animation`属性,使得搜索结果的显示更加平滑。 这个Demo虽然简单,但它涵盖了Ajax基本的使用流程,包括客户端的Ajax请求、服务器端的响应...

    ajax测试案例

    Ajax的核心是利用JavaScript与服务器进行异步数据交换,增强了用户体验,使得页面交互更加流畅。本案例主要涉及两个关键组件:前端的jQuery库处理JSON数据,以及后端的Servlet来生成和输出JSON。 **jQuery与JSON...

    struts+ajax

    这种方式减少了网络流量,提高了交互速度,增强了用户体验。 在"struts+json+ajax"这个项目中,可能涉及到以下几个方面: 1. **Struts的Action配置**:需要在struts-config.xml中配置对应的Action,指定其接收的...

    servlet+ajax做的两个下拉列表联动

    在Web开发中,"servlet+ajax做的两个下拉列表联动"是一种常见的交互技术,用于增强用户界面的动态性。这种技术通常应用于表单中,当用户在一个下拉列表中选择一个选项时,另一个下拉列表会根据所选选项动态更新其...

    js+ajax处理java后台返回的json对象循环创建到表格的方法.docx

    ### JS + AJAX 处理 Java 后台返回的 JSON 对象循环创建到表格的方法 在 Web 开发中,前后端分离已经成为一种趋势...这种方法不仅提高了数据处理的效率,同时也增强了用户界面的交互性和美观性。希望对读者有所帮助。

    基于Jquery+Ajax+Json实现分页显示附效果图

    通过Ajax技术,我们可以无刷新地从服务器获取数据,增强了用户体验。在接收到JSON数据后,Jquery对数据进行解析,并根据分页逻辑对页面上的内容进行更新。 分页逻辑的关键点在于计算总页数,并根据当前页码确定数据...

    JQuery+servlet自动补全例子

    在Web开发中,自动补全(Autocomplete)是一种常见的用户体验增强功能,它能够根据用户输入的部分文本,快速提供可能的匹配选项。本例子基于jQuery库和Servlet技术实现了一个自动补全功能,旨在帮助用户更高效地输入...

    json 解析所依赖的jar包

    它支持多种数据格式的传递,包括JSON,这使得开发者能够轻松地实现AJAX(Asynchronous JavaScript and XML)功能,提高用户体验。在Struts2中,通过集成JSON插件,可以方便地将服务器端的数据转化为JSON格式,然后...

    ssm框架+echart報表

    SSM框架,全称Spring、SpringMVC和MyBatis,是Java开发Web应用时常用的三大组件集成。...ECharts则是百度推出的一个开源的JavaScript图表库,用于生成各种数据...这样的技术结合不仅提升了项目的功能,也增强了用户体验。

    基于Vue+SpringBoot开发的满意度调查问卷系统源码+sql数据库+项目说明.zip

    10. 【可选】为了保证用户体验,页面初始加载完成以后,后续页面操作采用 Ajax 技 术实现异步提交和局部刷新,Ajax 交互的数据格式采用 Json 格式,使用合适的第三方工具 完成对象和 Json 字符串的互转,如 gson,...

    Json包文件及其依赖包

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它采用完全独立于语言的文本格式,...通过导入这些jar包,开发者可以轻松地实现在客户端和服务器之间的JSON数据交换,从而提升应用的性能和用户体验。

    html5+jquery与ssm进行json交互集成项目

    在本项目中,前端通过jQuery的`$.ajax()`或`$.getJSON()`方法向后端发送JSON请求,后端SpringMVC控制器处理请求后,使用如Gson或Jackson等库将Java对象转换为JSON格式,返回给前端。前端接收到JSON数据后,通过...

    Java精品项目源码第102期嘟嘟校园一卡通系统.zip

    6. JSON序列化与反序列化:使用Jackson或Gson处理JSON数据。 7. 前端交互:掌握Ajax技术实现前后端异步通信,提高页面响应速度。 四、调试与学习方法: 1. 观看视频演示:跟随视频逐步理解系统的功能实现。 2. 阅读...

    java中常用的所有jar包

    4. **Swing皮肤包**: Swing是Java的图形用户界面(GUI)库,通过使用不同的皮肤包(如Nimbus或WindowsLookAndFeel),开发者可以定制应用的外观,提升用户体验。 5. **Ajax的JS包**: Ajax(异步JavaScript和XML)是...

    JavaWeb开发技术补考复习.rar

    使用jQuery、Prototype等库可以简化Ajax的使用,提高用户体验。 5. **Tomcat服务器**:作为最常用的JavaWeb应用服务器,Tomcat的安装、配置、部署应用、日志查看以及性能优化都是开发者必须掌握的技能。 6. **...

    Openflashchart很好的图表开源工具

    - **数据准备**:在Java应用中,可以使用POJO(Plain Old Java Object)或数组来存储图表数据,然后通过Gson或其他JSON库将其转换为JSON字符串。 - **服务器端输出**:将JSON字符串作为HTTP响应的一部分返回给...

Global site tag (gtag.js) - Google Analytics