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 ...
随机推荐
- lerna管理前端模块实践
最近在工作中使用了 lerna 进行前端包的管理,效率提升了很多.所以打算总结一下最近几个月使用 lerna 的一些心得.有那些不足的地方,请包涵. 该篇文章主要包括在使用 lerna 的一些注意事项 ...
- HTML轮播(2)
前言 现在在完成轮播的框架上进行扩展更多的功能,上下切换图片,以及添加动画滚动更加平滑过渡 CSS <style> #LB { width: 100%; height: 948px; ov ...
- GO-数据类型
目录 数据类型 1.分类 2.布尔类型 3.整型 4.浮点型 5.字符类型 6.字符串 7.复数类型 数据类型 1.分类 Go语言内置以下这些基础类型: 类型 名称 长度 零值 说明 bool 布尔类 ...
- 关于node回调函数中同步和异步操作的理解
1.node的回调函数:如果一个方法的参数是另一个函数的名字,则这个参数本身就要回调函数,这个函数就是回调函数 1).同步操作文件(阻塞I/O) 同步就是一个人干完这个再干那个-- 所 ...
- Linux 动态库加载
动态库运行时搜索顺序 1.LD_PRELOAD LD_PRELOAD是一个环境变量,用于动态库加载,动态库加载的优先级最高: 2.-wl,-rpath 编译目标代码时指定的动态库搜索路径(指的是用-w ...
- Vue基础（2）
fetch与axios请求数据 fetch基本语法: fetch(url,{parmas}).then(res=> res.json() //返回promise对象 ).then(data=& ...
- ES index not_analyzed
在最初创建索引mapping时,未指定index:not_analyzed "exact_value": { "type": "string" ...
- Class的继承
Class 的继承 简介 Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多. class Point { } class ColorPoint ...
- String字符串性能优化的探究
一.背景 String 对象是我们使用最频繁的一个对象类型,但它的性能问题却是最容易被忽略的.String 对象作为 Java 语言中重要的数据类型,是内存中占用空间最大的一个对象,高效地使用字符串, ...
- pytorch 图像分类数据集（Fashion-MNIST）
import torch import torchvision import torchvision.transforms as transforms import matplotlib.pyplot ...