欢迎来到知了汇智!
联系电话:知了汇智-电话号码 028-62016472 / 13228113191

前端显示后端处理进度的简单实现-知了汇智

前端显示后端处理进度的简单实现

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

  思路:

  。前端使用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;
    }

  最终效果:
前端显示后端处理进度的简单实现

  只是简单实现了一下,还有很多地方可以优化的

  比如多用户同时使用的并发问题等
 

  版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习web前端时使用

项目教学·项目驱动

132 2811 3191
预约免费试学
点击咨询
预约试学