使用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>
相关推荐
这是AJAX的简单应用,希望对入门者有点帮助。
Android Studio下使用Google Gson解析Json数据示例
使用gson解析json的一次测试使用
非常详细的json使用方法。包括对象和json之间的相互转换,集合和json之间的相互转换,自己按照节点解析。gson功能真的很强大。
Eclipse下使用Google Gson解析Json数据示例,挺好用的,亲测
Eclipse下使用Google Gson解析Json数据示例
Gson的基本使用,特点:a、快速、高效b、代码量少、简洁c、面向对象d、数据传递和解析方便
Gson是Google的一个开源项目,可以将Java对象转换成JSON,也可能将JSON转换成Java对象。 Gson里最重要的对象有2个Gson 和 GsonBuilder Gson有2个最基本的方法 1) toJson() – 转换java 对象到JSON 2) from...
介绍:Gson is a Java library that can be used to convert Java Objects into their JSON representation. It can also be used to convert a JSON string to an equivalent Java object. 压缩包里有以下文件: ...
om.google.code.gson/gson/2.6.2 Gson maven依赖 java 开发包
android Gson使用实例 注释详细
struts2~json~gson~jquery~ajax简单应用
当json数据比较复杂的时候,可以使用解析对象的方式解析数据。用gson方法会容易的很多。
用户列表对象,使用JSONObject jsonStu = JSONObject.fromObject(list); 就会报错,因为对于嵌套类型的json它是解释不出来的,这时就需要用到com.google.gson.Gson.jar了。资源中提供了jar包与代码示例,一句代码...
使用Gson解析Json和Json数组,通俗易懂
Gson解析xml最强大的最方便的工具
1、生成Json数据 2、使用Gson解析Json数据(单个json对象、json数组和json对象内嵌json数组) // 这里有两篇好心人的博文,有详细的讲解 http://www.jb51.net/article/32547.htm ...
我们要使用json和java中使用,我们需要使用到一个第三方的包。它就是gson.jar。