基于html+ajax+Bootstrap+layer制作进度条用于采集任务批处理任务进度显示

基于html+ajax+Bootstrap+layer制作进度条用于采集任务批处理任务进度显示，简单说下原理，就是在一个按钮上绑定2个URL，一个任务总数id, 另一个单次任务url，第一次点击按钮时ajax取回当次任务总量id数组，再依次传id执行并返回结果。
首先看一下效果图：


HTML页面按钮：

<a href="{:url('caiji_urls',['nodeid'=>$vo.nodeid])}" data-total="{:url('caiji_total',['nodeid'=>$vo.nodeid])}" class="btn btn-danger btn-xs js-btn-progress" title="采集地址" data-key="url">采集地址</a>
                      <a href="{:url('caiji_content',['nodeid'=>$vo.nodeid])}" data-key="id" data-total="{:url('get_total_history',['nodeid'=>$vo.nodeid])}" class="btn btn-warning btn-xs js-btn-progress">采集内容</a>

javacript事件及进度

if ($('.js-btn-progress').length) {
    Wind.css('layer');

    $('.js-btn-progress').click(function (e) {
        e.preventDefault();

        var ids = [];
        var progress_data = [];
        var total = 0;
        var total_url = typeof($(this).data('total'))=="undefined" ?  false : $(this).data('total');
        var key = typeof($(this).data('key'))=="undefined" ?  'id': $(this).data('key') ;
        var reload = typeof($(this).data('reload'))=="undefined" ?  true : false;
        var url = $(this).attr('href');
        var html = '<div class="progress"><div class="progress-bar" style="width: 0%;"></div></div><div class="total-box text-center"></div><div class="msg" style="padding:15px;"></div>';
        var html2 = '<div class="msg" style="padding:15px;"></div>';
        var refresh = typeof($(this).data('refresh'))=="undefined" ?  true : false;//true:每次加载刷新msg，flase:追加msg
        var close = typeof($(this).data('close'))=="undefined" ?  0 : 1; //是否带关闭按钮
        var title = typeof($(this).attr('title'))=="undefined" ?  '进度条': $(this).attr('title') ;
        var height = $(this).attr('height');
        var width = $(this).attr('width');
        var area = typeof(height)=="undefined" ?  ['680px','360px']:[width,height] ;
        var time = typeof($(this).attr('time'))=="undefined" ? false : $(this).attr('time');
        var current = 0;
        var total_data = {};

        var input_ids = typeof($(this).data('input'))=="undefined" ?  '': $(this).data('input') ;
        if(input_ids!='')
        {
            input_ids = input_ids.split(',');
            $.each(input_ids,function (index, value) {
                var val = $(value).val();
                var key = value.replace('#','');
                total_data[key] = val;

            })
        }


        if(total_url==false)
        {
            Wind.use('layer', function () {
                //进度条
                layer.open({
                    title: title,
                    btn:[],
                    area: area,
                    shadeClose: false,
                    closeBtn: close,
                    content: html2
                });
                ajax_send_one()
            });

            function ajax_send_one()
            {
                $.ajax({
                    url: url,
                    type: 'GET',
                    dataType: 'json',
                    success:function(data)
                    {
                        if(data.status===true)
                        {
                            $('.msg').html(data.msg);
                            ajax_send_one();
                        }
                        if(data.status===false)
                        {
                            $('.msg').html(data.msg);
                        }

                    },
                    error:function (XMLHttpRequest, textStatus, errorThrown) {
                        $('.msg').append('<br><a href="javacript:;" class="reajax">无响应重试,手动点击</a>');
                    }
                });
            }
        }
        else
        {
            $.ajax({
                url: total_url,
                type: 'POST',
                data: total_data,
                dataType: 'json',
                success:function(data)
                {
                    if(data.code==0)
                    {
                        Wind.use('layer', function () {
                            layer.msg(data.msg)
                        })

                        return false
                    }


                    total = data.data.length;
                    progress_data = data.data;

                    Wind.use('layer', function () {
                        //进度条
                        layer.open({
                            title: title,
                            btn:[],
                            area: area,
                            shadeClose: false,
                            closeBtn: close,
                            content: html
                        });
                        ajax_send(0)
                    });


                }
            });

            function ajax_send(now)
            {
                current = now;
                $.ajax({
                    url: url,
                    type: 'post',
                    dataType: 'json',
                    data: {key:progress_data[now]},
                    success:function(data)
                    {
                        now++;
                        progress = (Number(now)/Number(total))*100;
                        $('.progress .progress-bar').css('width', progress.toFixed(2)+'%');
                        $('.progress .progress-bar').text(progress.toFixed(2)+'%');

                        $('.total-box').html(now+'/'+total);

                        if(refresh)
                            $('.msg').html(data.msg);
                        else
                            $('.msg').append(data.msg);

                        if(Number(total)==Number(now))
                        {
                            setTimeout(function () {
                                if(close==0)
                                    layer.closeAll();
                                if(reload)
                                    window.location.reload();
                            },1000)
                        }
                        else
                        {
                            if(time==false)
                                ajax_send(now);
                            else
                                setTimeout(function(){
                                    ajax_send(now);
                                },time)

                        }
                    },
                    error:function (XMLHttpRequest, textStatus, errorThrown) {
                        $('.msg').append('<br><a href="javacript:;" class="reajax">无响应重试,手动点击</a>');
                    }
                });
            }


            $('body').on('click','.reajax',function(){
                ajax_send(current);
            });
        }




    });
}

//用到layer.js打开弹窗加载一个url地址，
//需要layer组件可在这下载：https://www.uihtm.com/layui/layer/
//layer弹出层文档及在线测试：https://www.uihtm.com/layui/doc/modules/layer.html

总结，此组件或方法可应用到采集任务或批量执行任务，显示出进度条，看起来系统比较高大上。