码迷,mamicode.com
首页 > 编程语言 > 详细

SpringMVC+Jquery -页面异步加载数据

时间:2015-08-14 22:48:51      阅读:2244      评论:0      收藏:0      [点我收藏+]

标签:.post   加载数据   

背景:

做项目时涉及到页面,当我打算在controller中传一个list到页面,然后通过<c:foreach>循环遍历出来时,同事说:你这样每次都要刷新,这都是几百年前使用的技术了。你用post实现异步加载数据。然后就......

ResultUtil.java 工具类:

package com.sgcc.uds.fs.config.web.util;

import java.util.HashMap;
import java.util.Map;

import net.sf.json.JSONObject;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

public class ResultUtil {
	/** 日志 */
	private static Log logger = LogFactory.getLog(ResultUtil.class);
	// 保存json对象
	private Map<String, Object> results;
	// 消息"key
	public static final String MSG = "msg";
	// 成功标识 key
	public static final String SUCCESS = "success";
	// 单对"key
	public static final String OBJ = "obj";
	// 列表对象 key
	public static final String ORWS = "rows";
	// 总计"key
	public static final String TOTAL = "total";
	// 状" key
	public static final String STATUS = "status";

	public ResultUtil() {
		this.results = new HashMap<String, Object>();
		this.results.put(SUCCESS, true);
	}

	public Map<String, Object> getResult() {
		return this.results;
	}

	public void setResult(Map<String, Object> set) {
		this.results = set;
	}

	public boolean getSuccess() {
		return (Boolean) results.get(SUCCESS);
	}

	public String getMessage() {
		return (String) results.get(MSG);
	}

	public void setRows(Object list) {
		this.results.put(ORWS, list);
	}

	public void setTotal(Integer total) {
		this.results.put(TOTAL, total);
	}

	/**
	 * 根据"  自定义添加属"
	 * 
	 * @param key
	 *            属"标识
	 * @param value
	 */
	public void setProperty(String key, Object value) {
		try {
			this.results.put(key, value);
		} catch (RuntimeException e) {
			logger.error("-->>设置key为:" + key + "值为" + value + " Json时出错:", e);
		}
	}

	/**
	 * 设置状"信息
	 * 
	 * @param status
	 */
	public void setStatus(String status) {
		setProperty(STATUS, status);
	}

	/**
	 * 设置成功标志 " 用于程序执行是否正常
	 * 
	 * @param success
	 *            成功标识
	 */
	public void setSuccess(boolean success) {
		setProperty(SUCCESS, success);
	}

	/**
	 * 设置消息
	 * 
	 * @param msg
	 *            消息"
	 */
	public void setMsg(String msg) {
		setProperty(MSG, msg);
	}

	/**
	 * 设置总计"
	 * 
	 * @param size
	 */
	public void setTotal(int size) {
		setProperty(TOTAL, size);
	}

	public void setSize(int size) {
		setProperty(TOTAL, size);
	}

	/**
	 * 添加对象列表 数据为json格式
	 * 
	 * @param data
	 *            对象列表json格式
	 */
	public void setData(String data) {
		setProperty(ORWS, data);
	}

	/**
	 * 添加对象
	 * 
	 * @param obj
	 *            对象
	 */
	public void setObject(Object obj) {
		setProperty(OBJ, obj);
	}

	/**
	 * 返回json格式
	 */
	public String toJSONString() {
		JSONObject obj = new JSONObject();
		obj.put("data", this.results);
		return obj.toString();
	}

	public static void main(String aregs[]) {
		ResultUtil util = new ResultUtil();
		System.out.println(util.toString());
	}

}

controller类方法:

/**
	 * @return
	 * 加载文件信息
	 */
	@RequestMapping("/file/queryFileInfo")
	@ResponseBody
	public Map<String, Object> queryFileInfo()
	{
		ResultUtil result =new ResultUtil();
		
		List<File> fileList =getFileInfo();
		
		if(fileList !=null)
		{
			result.setRows(fileList);
			result.setSize(10);
			result.setMsg("查询成功!");
		}else
		{
			result.setSuccess(false);
			result.setMsg("加载数据失败!");
		}
		
		return result.getResult();
	}


jsp页面:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("home", path);
%>
<!doctype html>
<html lang="zh-CN">
<head>
<title>首页</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

<link rel="stylesheet" href="${home}/css/bootstrap.min.css" type="text/css"></link>
<link rel="stylesheet" href="${home}/css/allStyle.css" type="text/css"></link>
<!--[if lte IE 9]>
	<script type="text/javascript" src="${home}/js/respond.min.js"></script>
	<script type="text/javascript" src="${home}/js/html5shiv.min.js"></script>
	<![endif]-->
<script type="text/javascript">
		var home="${home}";
</script>

</head>
<body>

   <h2 class="sub-header">文件信息列表</h2> 
	 <div class="addbtn" >
	
	<button class="btn  btn-warning" data-toggle="modal"
			data-target="#addModal">增加文件信息</button>
	</div> 
	
	<!-- 信息列表 -->
	<div class="table-responsive">
		<table class="table table-striped table-bordered table-hover" id="userListTable">
			<thead>
				<tr>
					<th>权限文件</th>
					<th>数量</th>
					<th>每日新增</th>
					 <th>操作</th> 
				</tr>
			</thead>
			<tbody>
			
			</tbody>
		</table>
		
	</div>

<!-- 引入JS文件 -->
	<script type="text/javascript" src="${home}/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="${home}/js/bootstrap.min.js"></script>
	
	<script type="text/javascript" src="${home}/js/docs.min.js"></script>
	<script type="text/javascript" src="${home}/js/ie10-viewport-bug-workaround.js"></script>
	
	<script type="text/javascript" src="${home}/js/fileMgr.js"></script>
	
</body>
</html>

jquery方法:-fileMgr.js

//文件列表
$(document).ready(function() 
{
	var page=2;
	var pageSize=10;
	
	var pageParam={};
	pageParam.page=page;
	pageParam.pageSize=pageSize;
	
	$.post(home+"/file/queryFileInfo",pageParam,
	function(result)
	{
		if(result && result.success)
		{
			var obj =result.rows;
			
			for ( var i = 0; i < obj.length; i++) {
				var res =obj[i];
				var tr="<tr><td>"
				<span style="white-space:pre">	</span>+ res.bucketName
				<span style="white-space:pre">	</span>+ " </td>  <td>"
					+ res.number
					+ "</td> <td>"
					+ res.dailyNew
					+ "</td>";
					+ "<td><a  class='a_model a_collect' href=javascript:openUpdateModal('"+res.bucketName+"','"+res.number+"','"+res.dailyNew+"')>修改</a>" + "<a class='a_track' href=javascript:delResource('"+res.bucketName+"')>删除</a></td> </tr>";
					$(".table").append(tr);
							

			}
		}else
		{
			alert(result.msg);
		}
	},"json");
});

这样页面的数据直接在jquery直接添加到表格中,看起来是有点高大上的感觉。



版权声明:本文为博主原创文章,未经博主允许不得转载。

SpringMVC+Jquery -页面异步加载数据

标签:.post   加载数据   

原文地址:http://blog.csdn.net/u013147600/article/details/47667905

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!