本文共 1902 字，大约阅读时间需要 6 分钟。

最近处理一个小问题，点击上传excel数据表格，并显示进度条

直接调用ajax中xhr来显示进度条，发现进度条瞬间100%，页面数据并没有显示（原因：上传文件进度完成，但数据并没有完全存入数据库）

解决方法：获取数据存储的进度

在后台设置全局变量，获取存入数据库进度number_x = Nonenumber_y = None

class CaseImportsView(AdminUserRequiredMixin, JSONResponseMixin, FormView)           global number_x    global number_y    pass

创建一路由，发送前台

class JinDuTioaView(View):    def get(self, request, *args, **kwargs):        print(number_x, "yyyyyyyyyyyyyyyyy")        print(number_y)        number = [number_x, number_y]        return HttpResponse(json.dumps(number, ensure_ascii=False))前台处理（进度获取ajax，通过定时器，100ms请求一次，获取进度）

var xhr_provider = function() {    var xhr = new XMLHttpRequest();    var prog_url = xxxxx    var xx    var sitv = setInterval(function () {        $.ajax({            type: "get",            url: prog_url,            contentType: "application/json",            dataType: "json",            success: function (res) {                xx = parseInt(res[1])                var x = parseInt(res[1])                var y = parseInt(res[0])                var ele = document.getElementById('3');                var percent = Math.round(x * 100 / y);                ele.style.width = percent + '%';                console.log("1111111111111111111", percent)                document.getElementById('2').innerHTML = percent + '%';                if (percent == 100) {                    clearInterval(sitv)                    document.getElementById('upload_hint').innerHTML = '上传完成！'                } else {                    document.getElementById('upload_hint').innerHTML = '正在导入中...请不要重复点击“确认”按钮'                }            }        })    }, 100)    return xhr;};

点击上传按钮，显示进度

$.ajax({    url: xxxx,    type: 'post',    dataType: 'json',    // async: false,    data: {        "csrfmiddlewaretoken": $("[name=csrfmiddlewaretoken]").val()    },    // processData: false,    xhr: xhr_provider,    success: success});

完成，，方法比较笨，见谅

转载地址：https://blog.csdn.net/qq_41429841/article/details/107536433 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！