记录学习过程
做一个前端进度条,第一次做前端,看了一些资料,引用大佬的https://blog.csdn.net/liuxuli232/article/details/107021800
下面是结合自己情况改的,一个特别简单的动态进度条
前端是用的layUI模块
后端百分比值可以直接放入session,然后在前端可以直接获取到
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<!-- <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"> -->
<!DOCTYPE html>
<html>
<body>
<script type="application/javascript" src="./plug-in/jquery/jquery-1.8.3.js"></script>
<script type="application/javascript" src="./plug-in/layui/layui.all.js"></script>
<link rel="stylesheet" href="./plug-in/layui/css/layui.css">
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="executeprogress"
style="width: 80%;">0%
<div id="percentdiv" class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" id="submitbtn" lay-filter="demo1">执行</button>
</div>
</div>
<script type="text/javascript">
//定义模块
var element;
layui.use('element', function () {
element = layui.element;
});
//定义定时器
var timer;
//开始执行任务
$('#submitbtn').click(function () {
//进度条设置为百分之0
element.progress('executeprogress', '0%');
//请求后台
$.ajax({
type: "post",
url: "progressController.do?invDatagrid1",
cache: false,
data: {"int": "100"},
dataType: "json",
success: function (data) {
alert(data);
if (data == 'success') {
element.progress('executeprogress', '100%')
//关闭定时器
clearInterval(timer);
}
}
});
getProcessvalue();
});
//轮询请求进度数据
function getProcessvalue() {
//1秒请求一次进度条的数据
timer = setInterval(function () {
$.ajax({
type:"post",
url:"progressController.do?invDatagrid2",
dataType:"json",
success:function (data) {
alert(data+ "ddddddddddddddddddddddddddddddddddddddddddddddd");
element.progress('executeprogress', data + '%');
}
})
}, 1000);
};
</script>
</body>
</html>
后端
package com.ejinshui.controller;
import org.apache.cxf.transport.http.HTTPSession;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
@Controller
@RequestMapping("/progressController")
public class ProgressController {
@RequestMapping(params = "invDatagrid1")
@ResponseBody
public Object datagrid1(HttpServletRequest request) {
//获取session
HttpSession session = request.getSession();
//获取前端ajax参数
int num = Integer.valueOf(request.getParameter("int"));
for (int i = 0; i <= num; i++) {
//将进度值存储到session中
session.setAttribute("processvalue", i);
}
return "success";
}
@RequestMapping(params = "invDatagrid2")
@ResponseBody
public Object datagrid2(HttpServletRequest request) {
//获取session中的值
HttpSession session = request.getSession();
return session.getAttribute("processvalue");
}
}
继续学习,有错误的麻烦说一下。