Javaweb项目页面实时显示后台处理结果
http://www.cnblogs.com/dong-xu/p/6701271.html
此博文甚好，项目参照博主代码可实现。
前端页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page isErrorPage="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/css.css" />
<style type="text/css">
.loading{
background-image: url(../img/1352886927_7549.gif);
width: 35px;
height: 35px;
display: inline-block;
float: left;
margin-left: 10px;
margin-right: 6px;
background-repeat: no-repeat; }
</style>
</head> <body>
<div id="pageAll">
<label style="color:red">导出数据说明：不支持wps类excel，文件后缀.xls,文件名不能包含汉字；</label><br>
<label style="color:red">excel中数据格式如下，列名严格按照图片格式书写，列顺序不可变；（只支持excel）</label>
<div style="width:80%;height:100px;background-image:url('../img/1512521006(1).jpg');display:block;background-repeat: no-repeat;" >
</div>
<form action="${pageContext.request.contextPath}/UploadUsingExcelServlet" method="post" enctype="multipart/form-data" id="dataForm">
上传excel<input type="file" name="file1" id="fileInput">
<input type="submit" value="提交" id="submit">
</form> <div class="page">
<div class="conShow" id="pro"> </div>
<div class="conShow" id="res">
<span>错误信息:</span><br>
</div> </div> </div>
</body>
<script type="text/javascript">
$(function () {
var form = document.getElementById("dataForm");
var progress = document.getElementById("pro");
$("#submit").click(function(event) {
//阻止默认事件
event.preventDefault();
//循环查看状态
var t = setInterval(function(){ $.ajax({
url: '${pageContext.request.contextPath}/ProgressServlet',
type: 'POST',
dataType: 'text',
data: {
filename: fileInput.files[0].name,
},
success: function (responseText) {
var data = JSON.parse(responseText);
//前台更新进度
var jindu="<span class=\"loading\"></span> 传输进度："+data.size+"/"+data.progress;
$("#pro").html(jindu);
// progress.innerText ="传输进度 :"+data.size+"/"+data.progress;
// alert( data.size+"/"+data.progress);
var tag="";
if(data.errors!=""){
tag="<span style=\"color:red\">"+data.errors+"</span><br>"; $("#res").append(tag);
} },
error: function(){
console.log("error");
}
});
}, 100);
//上传文件
$.ajax({
url: '${pageContext.request.contextPath}/UploadUsingExcelServlet',
type: 'POST',
dataType: 'text',
data: new FormData(form),
processData: false,
contentType: false,
success: function (responseText) {
//上传完成，清除循环事件
clearInterval(t);
//将进度更新至100%
progress.innerText = "完成！";
},
error: function(){
console.log("error");
}
});
return false;
});
})();
</script>
</html>
查询进度的servlet
package com.rfx.servlet; import java.io.IOException; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory; import com.alibaba.fastjson.JSONObject;
import com.rfx.util.ProgressSingleton; /**
* <p>实时显示进度</p>
* Servlet implementation class ProgressServlet
*/
@WebServlet("/ProgressServlet")
public class ProgressServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private final Log log = LogFactory.getLog(getClass());
/**
* @see HttpServlet#HttpServlet()
*/
public ProgressServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
log.info("进度反馈");
Object size = ProgressSingleton.get("Size");
Object progress = ProgressSingleton.get("Progress");
Object errorstr = ProgressSingleton.get("errors");
errorstr = errorstr == null ? "" : errorstr;
JSONObject json = new JSONObject();
json.put("size", size);
json.put("progress", progress);
json.put("errors", errorstr);
ProgressSingleton.remove("errors");//在保证存储的信息是实时错误状态，所以，查询一次，清除一次，只存实时处理结果
response.getWriter().print(json.toString()); } }
后台处理中，向单例存储数据。
//错误信息处理，遇到错误信息存储起来
ProgressSingleton.put("errors",map.get("product_num")+" >> "+string2);
//保存数据提条数和当前处理条数
ProgressSingleton.put("Size",list.size());
int count=0;
if ("zb".equals(type)) { for (Map<String, String> map : list) {
count++;
ProgressSingleton.put("Progress",count);
JSONObject jsonObject2 = mjService.addShiYongJiLu(map);
jsonArray.add(jsonObject2);
}
//在处理完成的servlet中，清空单例
ProgressSingleton.remove("Size");
ProgressSingleton.remove("Progress");
ProgressSingleton.remove("errors");
Javaweb项目页面实时显示后台处理结果的更多相关文章
- jsp实时显示后台批处理进度 - out分块，简单的长连接方式
这两天在实现一个批处理操作,但是想让前台实时显示后台批处理进度,本想着用复杂一些的框架可以实现异步信息调用 但是鉴于是内部管理系统,且只有一两个人用到这个功能,所以做了一个简单的长连接方式的实时响应 ...
- 基于Saltstatck实现页面实时显示tomcat启动日志(17)
一.相关文件 master端: /srv/salt/tomcat/start.sls #tomcat启动服务state.sls,须要自己创建 /srv/salt/tomca ...
- js页面实时显示时间
1.通过getMonth()实现获取月份,从0开始计数,需要+1: 2.通过getDay()实现获取星期天数,从0开始,0表示星期日: 3.通过getDate()获取日期. 4.setTimeout( ...
- springboot1.5.9整合websocket实现实时显示的小demo
最近由于项目需要实时显示数据库更新的数据变化情况,一开始想过在前端使用ajax异步轮询方法实现,但后面考虑到性能和流量等要求,就放弃该方法而选择使用websocket(毕竟现在springboot整合 ...
- Javaweb项目-下拉列表显示后台数据库的数据
下面将演示前端下拉列表显示后台数据库中class表的说有班级的名称 环境: Tomcat-8.5.40 mysql-8.0.13 eclipse-4.9.0 springmvc框架 一.从mysql中 ...
- asp.net mvc后台操作之读写xml控制首页动态页面开关显示
一.背景 在asp.net mvc项目里,用户需要开拓几个活动版面,并以侧栏的方式呈现在首页右侧,几个活动时间不一致,为避免浏览者在活动未开放之时进入未开放的服务页面.因此不仅需要在活动代码中加入限制 ...
- Asp.Net MVC页面显示后台处理进度问题
这个问题的背景是,用户通过浏览器上传文件或Excel数据到系统中,页面需要时时显示后台处理进度,以增强用户的体验. 在GitHub上找到一个一个项目,基本实现了这个功能,具体效果如下图 代码实现过程大 ...
- C# 动态创建SQL数据库（二） 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示，编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求
C# 动态创建SQL数据库(二) 使用Entity Framework 创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...
- angular-ui-select （系列二）远程搜索，页面方框显示的值跟传给后台的值不一样解决方案
三:下拉单选远程搜索: 一个重点是: 这个方法,就是让我们去远程搜索的 refresh="ctrl.refreshAddresses($select.search)" refres ...
随机推荐
- 第三十三章 linux常规练习题(二)
一.练习题一 1.删除用户基本组shanghai03.发现无法正常删除,怎样才能将其删除掉,不能删除用户.2.打开多个xshell窗口连接登录同一虚拟机,使用不同的用户登录多次,分别使用w和who命令 ...
- 微信小程序分类的实现
微信小程序的分类功能思路 实现思路 1.把屏幕当成一个固定的盒子,然后把盒子分成两边,并让盒子的每一边都能够滚动. 2.通过将左侧边栏元素的id和右边内容的categoryId进行匹配,渲染展示相同i ...
- 《3D打印与工业制造》个人总结 —— 周吉瑞
<3D打印与工业制造>个人总结 ---- 周吉瑞 JERRY_Z. ~ 2020 / 10 / 24 转载请注明出处!️ 目录 <3D打印与工业制造>个人总结 ---- 周吉瑞 ...
- Windows2008R2+ IIS7.5+php+mysql 搭建教程
Windows2008R2+ IIS7.5+php+mysql 搭建教程 1. IIS7.5安装安装角色时候因为 Fastcgi 的需要, aspnet 和 asp 都要选装. 我为了方便,所有的除 ...
- html input只允许输入整数
如果想想让input输入框只输入整数,直接使用以下的input就可以了 <input id="sequence" class="o_input" onke ...
- Django做验证码登录
验证码 关注公众号"轻松学编程"了解更多. 1.作用 在用户登录,注册以及一些敏感操作的时候,我们为了防止服务器被暴力请求,或爬虫爬取,我们可以使用验证码进行过滤,减轻服务器的压力 ...
- [Luogu P2014]选课 (树形DP)
题面 传送门:https://www.luogu.org/problemnew/show/P2014 Solution 这是一道十分经典的树形DP题,这种类型的树形DP有一种很普遍的解法. 首先,观察 ...
- SQL SERVER级联查询及数据结构《存储过程-递归树形查询》
--创建表,插入数据 create table tb(id varchar(3) , pid varchar(3) , name varchar(10))insert into tb values(' ...
- 【Luogu】P1072 Hankson 的趣味题 题解
原题链接 嗯...通过标签我们易得知,这是一道数学题(废话) 其中,题目给了这两个条件: \(gcd(x,a_0)=a_1,lcm(x,b_0)=b_1\) 所以,根据 \(gcd\) 与 \(lcm ...
- XML转换成TXT行数据的Java程序
ZKe ------------------- XML数据的一个块内的所有属性,转换成TXT文件的一行.众所周知XML文件是通过类似HTML的标签进行数据的定义如图所示 属性由id, article, ...