前端显示后端处理进度的简单实现_前端进度条如何显示后端进度?_xiaoshijiu333的博客-CSDN博客

安宇雨 - 随手采集
2023-07-28 16:19:05
随手采集
0000-未整理-等待研究

有时候前端向后端发送一个请求，后端处理的过程稍微有点长，为了增强用户体验，可以在前端用一个进度条显示后端的处理进程。简单实现方法。

思路：

前端使用setInterval()函数，设置每隔几秒向后端发送一次请求，这个请求就是请求后端的处理进程。
然后再创建一个ajax请求，向后端请求数据，请求成功之后将setInterval()函数停止
后端有两个方法，对应两个url请求，一个处理数据的请求，一个处理进程的请求
通过全局变量的形式，设定进程的进行。处理进程的请求方法就是把全局变量传给前端

大致思路就在上面，可以实现简单的进程显示。

具体代码：

前端使用的是nanobar进度条插件，关于它的使用和介绍可以参考我的上一篇博客===>
轻量级nanobar进度条插件的介绍和使用

后端使用的是Java语言的Struts2框架，其他语言或者框架道理类似

前端js代码

//每隔一秒查询进度
    var intelval=setInterval(function () {

        //执行ajax
        $.ajax({
            url:"image_progress.action",
            dataType:"text",
            type:"post",
            success:function (data) {
                $("#tips").html("正在分析，请稍等...");
                $(".nanobar").fadeIn();
                //显示进度
                nanobar.go(data);
            }
        })
    },1000);


    //发送Ajax请求，将图片传给服务器
    var formData = new FormData();
    formData.append("upload",file);
    $.ajax({
        url:"image_upload.action",
        data:formData,
        dataType:"json",
        type:"post",
        contentType: false,
        processData: false,

        success:function (data) {
            //结束后台进度查询
            clearInterval(intelval);
            nanobar.go(100);
            $("#tips").html("");
            $(".nanobar").fadeOut();
            //显示分析结果
            $("#result").html(data.value);
        }
    })
});

后端Java代码

    //定义一个全局变量，用来接受显示进度
    private static Integer global=0;

public String upload() {

    global=0;
            
        //处理上传的文件
            .......

        global=30;

        ......(处理逻辑)


        //数据返回给前端
            ......
               
        //重置全局变量
        global=0;
        
        }

        return null;
    }

//返回全局变量，显示进度
 public String progress() throws IOException {

    //自己定义,设置进度,根据处理速度判断
        if(global>=30&&global<95){
            global=global+5;
        }
        
        
    //数据返回给前端
            ......(返回global)

        return null;
    }

最终效果:
在这里插入图片描述