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 ...
随机推荐
- spring boot:用redis+lua实现表单接口的幂等性(spring boot 2.2.0)
一,什么是幂等性? 1,幂等: 幂等操作:不管执行多少次,所产生的影响都和一次执行的影响相同. 幂等函数或幂等方法:可以使用相同的参数重复执行,并能获得相同的结果的函数/方法. 这些函数/方法不用担心 ...
- python 安装matplotlib
下载minianaconda 安装 进入cmd下 conda create --name python37 python=3.7 创建python3.7环境 conda activate pytho ...
- C#中的SqlBulkCopy批量插入数据
在C#中,我们可以使用sqlBulkCopy去批量插入数据,其他批量插入方法不在讨论. 1 /// <summary> 2 /// SqlBulkCopy批量插入数据 3 /// < ...
- 【Azure 批处理 Azure Batch】在Azure Batch中如何通过开始任务自动安装第三方依赖的一些软件(Windows环境)
准备条件 Azure Batch账号 需要安装的软件包(zip)文件,里面包含该软件的msi安装文件, 此处使用python.msi 版本 3.3.3 作为例子(https://www.python. ...
- MySQL数据库基础-2范式
数据库结构设计 范式 设计数据库的规范 第12345范式,凡是之间有依赖关系. 关系模型的发明者埃德加·科德最早提出这一概念,并于1970 年代初定义了第一范式.第二范式和第三范式的概念 设计关系数据 ...
- 一键开启win10全局utf8，编码问题说拜拜
在windows下开发,开发环境的配置是一个很头大的问题,而编码问题是另一个令人头大的问题,常常出现的中文乱码令人痛不欲生,其原因就在于windows默认的编码并不是现在很普遍的utf8格式,本文就来 ...
- 将书法字体制作成pcb库文件，并使用该字体作为logo印制在自己设计的电路板上。
本文主要介绍,如何将写在纸张上的书法制作成pcb库文件,以达到如下效果: 形成具有镂空效果的标记,印制在PCB电路板上,一图logo位于top overlayer,是镂空丝印,二图位于top laye ...
- CodeForces 578E Walking!
题意 略. 题解 好毒瘤啊,我最多就口胡第一问的样子吧. 第一问很显然(跟凤凰县探险队员一样显然),就是每次贪心选长度最大的满足条件的子序列,选不到就折返回来.所以折返的次数很明显就是选出子序列的个数 ...
- python pickle 模块的使用详解
用于序列化的两个模块 json:用于字符串和Python数据类型间进行转换 pickle: 用于python特有的类型和python的数据类型间进行转换 json提供四个功能:dumps,dump,l ...
- 安装 Homebrew&iterm2&Oh My Zsh
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/instal ...