基于Bootstrap ajax进度条前端和后端PHP实现方法

在写代码时经常会有用进度条，比如批量添加，批量设置，批量采集，进行分批次显示进度。下面介绍一下基于bootstrap和ajax结合的进度条的前端和后台写法。

演示截图：

需要用到弹出层组件layer.js，

前端代码：

var ids = {$order_ids};
var total = ids.length;
var html = '<div class="progress"><div class="progress-bar" style="width: 0%;"></div></div><div class="msg" style="padding:15px;"></div>';
        $('#send_all').click(function(event) {
            //进度条
            layer.open({
                title: '进度',
                shadeClose: false,
                closeBtn:0,
                content: html
            });
            ajax_send(0)
        });

        function ajax_send(now)
        {
            order_id = ids[now]
            $.ajax({
                url: '{:url("order/order/ajax_send_order_success")}',
                type: 'GET',
                dataType: 'json',
                data: {order_id: order_id},
                success:function(data)
                {
                    now++;
                    progress = (Number(now)/Number(total))*100;
                    console.log('progress:'+progress)
                    console.log('progress:'+progress)
                    $('.progress .progress-bar').css('width', progress.toFixed(2)+'%');
                    $('.progress .progress-bar').text(progress.toFixed(2)+'%');
                    $('.msg').text(data.msg);

                    if(Number(total)==Number(now))
                    {
                        layer.closeAll();
                        window.location.reload();
                    }
                    else
                    {   setTimeout(function(){
                             ajax_send(now);
                        },1500)
                       
                    }
                }
            });


        }

后端php代码：

//中签成功发送
    public function ajax_send_order_success()
    {

    	$order_id = input('order_id');
		$order = Db::name('order')
		->alias('o')
		->join('cmf_wechat_user u', 'u.openid = o.openid')
		->where(['o.order_id'=>$order_id])->find();
	$str = '发送成功：'.$order['nickname'].'('.$order["name"].')';
	return json(['status'=>true,'msg'=>$str]);
    ｝