SpringMVC+Jquery -页面异步加载数据
背景：
做项目时涉及到页面，当我打算在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();
}
<%@ 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直接添加到表格中，看起来是有点高大上的感觉。