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();
}
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 -页面异步载入数据的更多相关文章
- bootstrap jQuery Ztree异步载入数据，check选择&可加入、改动、删除节点
效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle ...
- [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件
本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...
- 使用springmvc从页面中获取数据，然后根据获得的参数信息进行修改，如果修改的数据中含有不是基本数据类型的参数。比如传的参数中有Date类型的数据时，需要我们进行参数类型转换。
1.1 需求 在商品修改页面可以修改商品的生产日期,并且根据业务需求自定义日期格式. 1.2 需求分析 由于日期数据有很多格式,所以springmvc没办法把字符串转换成日期类型.所以需要自定义参数绑 ...
- Android利用Volley异步载入数据完整具体演示样例(二)
MainActivity例如以下: package cc.y; import android.app.Activity; import android.content.Context; import ...
- 使用 jsPlumb 绘制拓扑图 —— 异步载入与绘制的实现
本文实现的方法能够边异步载入数据边绘制拓扑图. 有若干点须要说明一下: 1. 一次性获取全部数据并绘制拓扑图. 请參见文章: <使用 JsPlumb 绘制拓扑图的通用方法> ; 本文实现 ...
- android中listview分页载入数据
前段时间做的新浪微博项目一直想实现listview分页载入数据,今天最终实现了,哈哈!感觉挺好的,今天又写了个demo给大家分享下. 首先说下listview的优化方案,这也是面试中常考的题目.优化方 ...
- Cocos2d-x3.2 TextureCache类异步载入功能解说
本文TextureCache类异步载入功能的代码抽出,总共代码就200多行.感兴趣能够看看. 研究这个主要是由于项目中须要异步插入数据,但之前的方法在Android上总是崩溃所以想到TextureCa ...
- Springmvc中 同步/异步请求参数的传递以及数据的返回
转载:http://blog.csdn.net/qh_java/article/details/44802287 注意: 这里的返回就是返回到jsp页面 **** controller接收前台数据的方 ...
- springmvc中同步/异步请求参数的传递以及数据的返回
注意: 这里的返回就是返回到jsp页面 **** controller接收前台数据的方式,以及将处理后的model 传向前台***** 1.前台传递数据的接受:传的属性名和javabean的属性相同 ...
随机推荐
- debian 9 配置ati驱动
可以参考debian wiki 1.识别自己显卡驱动 lspci -nn | grep VGA 2.添加源 # Debian "stretch" deb http://httpre ...
- java的继承中构造方法
构造方法在创建对象的时候是被自动调用的,然后在继承中,是先调用父类的构造方法,然后在调用子类的构造方法, 当构造方法重写之后,在super中添加对应你想要调用构造方法的参数 例:父类 package ...
- navicat连接SQL Sever数据库出现的问题
1.navicat 连接sqlserver提示要安装 sql server native client 解决办法:在navicat安装目录下有个sqlncli_x64.msi文件,双击安装一直下一步就 ...
- [terry笔记]python内置函数
总结一下内置函数,Build-in Function. 一.数学运算类 abs(x) 求绝对值 complex([real[, imag]]) 创建一个复数 divmod(a, b) 分别取商和余数注 ...
- hdu 2032 一维数组实现杨辉三角
杨辉三角 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- js中console强大之处体现在哪
js中console强大之处体现在哪 一.总结 一句话总结:在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对conso ...
- mysql裸文件备份XtraBackup (innobackupex)
结构如下: 热备分为逻辑备份和裸文件备份. 裸文件备份比逻辑备份在速度上更快一些,因为它在底层复制数据文件.世界上唯一一款开源的,能够对INNODB和XtrDB数据库进行热备的开源工具. 他的优点是备 ...
- POJ 1949 DP？
题意: 有n个家务,第i个家务需要一定时间来完成,并且第i个任务必须在它 "前面的" 某些任务完成之后才能开始. 给你任务信息,问你最短需要多少时间来完成任务. 输入: 第一行n个 ...
- avalon过滤
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> ...
- 《Unix环境高级编程》读书笔记 第3章-文件I/O
1. 引言 Unix系统的大多数文件I/O只需用到5个函数:open.read.write.lseek以及close 本章描述的函数经常被称为不带缓冲的I/O.术语不带缓冲指的是在用户的进程中对其不会 ...