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 ...
随机推荐
- css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器
1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...
- Hugo+Github 搭建个人博客（Windows环境下）
目录 Hugo+Github 搭建个人博客(Windows环境下) 1.前言 2.Differences 2.1 https vs SSH 2.2 新建的github的仓库名必须为 用户名+githu ...
- Mac下使用GitHub+Hexo搭建个人博客
首发链接 开始之前需要在电脑上安装好Git和node.js,Mac上可以使用Homebrew命令行工具来安装Git和node.js 安装Homebrew 在命令行工具输入以下命令,如果已经安装过Hom ...
- FFmpeg 将大量图片合成为视频 video
1.基本格式终端输入: ffmpeg -f image2 -i /home/ttwang/images/image%d.jpg tt.mp4其中/home/ttwang/images/images%d ...
- Redis基础（三）Redis持久化：RDB与AOF
什么是Redis持久化? Redis是键值对的内存数据库,它将数据存储在内存里.客户端发送命令到服务器,再由服务器到内存里查找数据. 一旦Redis服务器进程退出,存储在内存里的数据就会丢失. 为了解 ...
- Linux 系统编程 学习：02-进程间通信1：Unix IPC（1）管道
Linux 系统编程 学习:02-进程间通信1:Unix IPC(1)管道 背景 上一讲我们介绍了创建子进程的方式.我们都知道,创建子进程是为了与父进程协作(或者是为了执行新的程序,参考 Linux ...
- 在IIS中部署前后端应用，多么痛的领悟！
目前手上的Web项目是前后端分离的,所以有时也会倒腾Vue框架. 前后端应用最终以容器形态.在k8s中部署, 为此我搭建了基于Gitlab flow的Devops流程. 在Devops实践中,容器部署 ...
- 对Python"一切皆对象"的小参悟
写在前面 若有误区请大神不吝指正,以免带偏了如我者的弱鸡们 据闻对此不再懵逼后,于函数以及高阶函数编程的进阶有益 类:又称对象,由类创建的个体被称为实例 名言名句"一切皆对象(一切皆类,一切 ...
- （模板）graham扫描法、andrew算法求凸包
凸包算法讲解:Click Here 题目链接:https://vjudge.net/problem/POJ-1113 题意:简化下题意即求凸包的周长+2×PI×r. 思路:用graham求凸包,模板是 ...
- 微信小程序授权页面
这里也是比较简单的 直接复制粘贴就可以用,可能图片位置不对.. <template> <view id="imporwer"> <image src= ...