使用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配置，将"获取所有影片"、"添加影片"、"修改影片"、"删除影片"的配置删除，修改后的文件如下：

 

 

	

	
		
		
		
		
		
		
		
			
			
			
			
			
			
			
			
				/manager/updateFilm.jsp
			
			
			
			
			
			
			
		
	

 

 

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 {

	//业务逻辑对象
	@Autowired
	private FilmService filmService;
	
	//封装查询结果
	private List 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 getFilmList() {
		return filmList;
	}

	public void setFilmList(List 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;
%>


  
    
    
    
    
	
    
  
  
  
  

    
    	
    
	添加影片信息
	
   	

   		

   			
序号
影片名
操作
   		
	
	
  
  

 

 

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;
%>



  
    
    
    
    
	
    
  
  
    
  	

	    
	    	
	    	
	    
	    [返回影片列表]
    
  

 

 

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;
%>



  
    
    
    
    
	
    
  
  
    
  	

	    
	    	
	    	
	    	
	    
	    [返回影片列表]