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 ...
随机推荐
- CentOS 8 安装 oniguruma 和 oniguruma-devel
一,oniguruma是什么? oniguruma是一个处理正则表达式的库,我们之所以需要安装它, 是因为在安装php7.4的过程中,mbstring的正则表达式处理功能对这个包有依赖性, 所以我们要 ...
- sql查询:部门工资前三高的员工和部门工资最高的员工
创建表:Create table If Not Exists Employee (Id int, Name varchar(255), Salary int, DepartmentId int);Cr ...
- TCMalloc 内存分配原理简析
一.TCMalloc TCMalloc简介 为啥要介绍 TCMalloc? 因为golang的内存分配算法绝大部分都是来自 TCMalloc,golang只改动了其中的一小部分.所以要理解golang ...
- springcloud中使用dubbo开发rpc服务及调用
spring cloud中基于springboot开发的微服务,是基于http的rest接口,也可以开发基于dubbo的rpc接口. 一,创建goodsService模块 1, 在创建的goodsSe ...
- OpenCV开发笔记（七十三）：红胖子8分钟带你使用opencv+dnn+yolov3识别物体
前言 级联分类器的效果并不是很好,准确度相对深度学习较低,上一章节使用了dnn中的tensorflow,本章使用yolov3模型,识别出具体的分类. Demo 320x320,置信度0 ...
- Class的继承
Class 的继承 简介 Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多. class Point { } class ColorPoint ...
- (PatchGANs)Pecomputed Real-time Texture Synthesis With Markovian Generative Adversarial Networks
Introduction: Deconvolution; Computational costs; Strided convolutional nets; Markov patches; 1. Q ...
- WrapperClass
* 测试包装类的基本用法: * 包装类就是把基本属性也变成对象,方便有时候用: * 八种基本属性,其他类型类似于integer,除了int-integer和char-character:其他都是原样: ...
- 【Android Studio】安卓开发初体验2——Activity
Activity是什么 Activity用于提供可视化用户界面的组件,可以与用户进行交互来完成某项任务,一个应用程序中可以包含零个或多个活动 Activity的创建 首先将左侧的Active Tool ...
- rabbitmq（一）-基础入门
原文地址:https://www.jianshu.com/p/e186a7fce8cc 在学东西之前,我们先有一个方法论,知道如何学习.学习一个东西一般都遵循以下几个环节: xxx是什么,诞生的原因, ...