使用ajax动态刷新进度条的方法

我自己使用的方法是：将进度信息存在对象中每个订单一个对象然后写入

ResponseBody中在前端循环取出放入写好的数组内

前端在使用classname方法获取每个工序一共有多少个进度条

首先看我的实体类

package com.example.prod.pojo;

import java.util.List;

/**
 * 此类不是数据库中表的映射类
 * 是封装进度信息的类
 */
public class SpeedOfProgress {
    //订单编号
    int order_id;
    //不合格数量
    int abnormalcount;
    //工序进度信息list只装数据
    List<String> processprogress1;
    //对象进度信息
    Processprogress processprogress;

    public int getOrder_id() {
        return order_id;
    }

    public void setOrder_id(int order_id) {
        this.order_id = order_id;
    }

    public int getAbnormalcount() {
        return abnormalcount;
    }

    public void setAbnormalcount(int abnormalcount) {
        this.abnormalcount = abnormalcount;
    }

    public Processprogress getProcessprogress() {
        return processprogress;
    }

    public void setProcessprogress(Processprogress processprogress) {
        this.processprogress = processprogress;
    }

    public List<String> getProcessprogress1() {
        return processprogress1;
    }

    public void setProcessprogress1(List<String> processprogress1) {
        this.processprogress1 = processprogress1;
    }

    public SpeedOfProgress() {
    }

    public SpeedOfProgress(int order_id, int abnormalcount, List<String> processprogress1, Processprogress processprogress) {
        this.order_id = order_id;
        this.abnormalcount = abnormalcount;
        this.processprogress1 = processprogress1;
        this.processprogress = processprogress;
    }

    @Override
    public String toString() {
        return "SpeedOfProgress{" +
                "order_id=" + order_id +
                ", abnormalcount=" + abnormalcount +
                ", processprogress1=" + processprogress1 +
                ", processprogress=" + processprogress +
                '}';
    }
}

 然后你们通过service层将进度信息计算号，并丰入这个对象中

前端的处理方法

//订单进度
		window.onload = function  getres(){
			$.ajax({
				url:"order/getSpeedOfProgress.do",
				dataType:"json",
				type:"POST",
				success:function (requsetRes){
					var div
					var ass=[]
					var ct=[]
					var tt=[]
					var pk=[]
					for (var i=0;i<requsetRes.length;i++){
						ass.push(requsetRes[i].processprogress.ass_progress)
						ct.push(requsetRes[i].processprogress.ct_progress)
						tt.push(requsetRes[i].processprogress.tt_progress)
						pk.push(requsetRes[i].processprogress.pk_progress)
						div+='<div class="col-lg-12">'+
								'<div>'+'<span>'+requsetRes[i].order_id+'<span class="badge" id="getAbnormal" onclick="getabnormalOrderId(this)">'+requsetRes[i].abnormalcount+'</span>'+'</span>'+'</div>'+
								'<div class="col-lg-3">'+
									'<span class="label label-primary">'+"组装"+'</span>'+
									'<div class="progress">'+
										'<div class="progress-bar progress-bar-warning" id="zuzhuang" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">'+requsetRes[i].processprogress.ass_progress+'</div>'+
									'</div>'+
								'</div>'+
								'<div class="col-lg-3">'+
									'<span class="label label-primary">'+"标定"+'</span>'+
									'<div class="progress">'+
										'<div class="progress-bar progress-bar-info" id="biaoding" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">'+requsetRes[i].processprogress.ct_progress+'</div>'+
									'</div>'+
								'</div>'+
								'<div class="col-lg-3">'+
									'<span class="label label-primary">'+"检测"+'</span>'+
									'<div class="progress">'+
										'<div class="progress-bar progress-bar-danger" id="jiance" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">'+requsetRes[i].processprogress.tt_progress+'</div>'+
									'</div>'+
								'</div>'+
								'<div class="col-lg-3">'+
									'<span class="label label-primary">'+"包装"+'</span>'+
									'<div class="progress">'+
										'<div class="progress-bar progress-bar-success" id="baozhuang" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">'+requsetRes[i].processprogress.pk_progress+'</div>'+
									'</div>'+
								'</div>'+
							'</div>'
					}
					$("#getProcess").html(div)
					//修改所有组装的进度样式
					var listDiv = document.getElementsByClassName("progress-bar progress-bar-warning")
					for (var j =0;j<listDiv.length;j++){
						listDiv[j].style.width=ass[j]
					}
					//修改所有标定的进度样式
					var listCT = document.getElementsByClassName("progress-bar progress-bar-info")
					for (var q=0;q<listCT.length;q++){
						listCT[q].style.width=ct[q]
					}
					//修改所有的检测
					var listTT = document.getElementsByClassName("progress-bar progress-bar-danger")
					console.log(tt)
					for (var w=0;w<listTT.length;w++){
						listTT[w].style.width=tt[w]
					}
					//修改所有包装进度
					var listPK = document.getElementsByClassName("progress-bar progress-bar-success")
					console.log(pk)
					for (var e=0;e<listPK.length;e++){
						listPK[e].style.width=pk[e]
					}
				}
			})
		}

其中ass,等数组是表示每个工序的总进度数组，里面包含了所有订单的进度

然后在通过，这里我是通过class来区别每个工序的

document.getElementsByClassName（）获取每个进度一共有多少个进度条

因为有多少个class的元素ass中就有多少个元素，所以使用一个循环就可以搞定，然后通过

listTT[w].style.width=tt[w]来修改对应元素的width的值，然后最后展示结果就是