springboot + js + layUI简单动态进度条

最新推荐文章于 2023-02-22 16:12:27 发布

生活戏剧

最新推荐文章于 2023-02-22 16:12:27 发布

阅读量596

点赞数

分类专栏：笔记文章标签： ajax java web

本文链接：https://blog.csdn.net/qq_46646716/article/details/109644101

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

记录学习过程

做一个前端进度条，第一次做前端，看了一些资料，引用大佬的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");
    }
}

继续学习，有错误的麻烦说一下。

生活戏剧

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
springboot + js + layUI简单动态进度条

记录学习过程做一个前段进度条，第一次做前段，看了一些资料，引用大佬的https://blog.csdn.net/liuxuli232/article/details/107021800下面是结合自己实际情况改的<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@include file="/context/mytags.jsp"%><
复制链接

扫一扫