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

来源：互联网发布：软件可行性分析报告编辑：程序博客网时间：2024/06/05 16:34

背景：

做项目时涉及到页面，当我打算在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;// 消息"keypublic static final String MSG = "msg";// 成功标识 keypublic static final String SUCCESS = "success";// 单对"keypublic static final String OBJ = "obj";// 列表对象 keypublic static final String ORWS = "rows";// 总计"keypublic static final String TOTAL = "total";// 状" keypublic 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")@ResponseBodypublic 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直接添加到表格中，看起来是有点高大上的感觉。

1 0