最近处理一个小问题,点击上传excel数据表格,并显示进度条
直接调用ajax中xhr来显示进度条,发现进度条瞬间100%,页面数据并没有显示(原因:上传文件进度完成,但数据并没有完全存入数据库)
解决方法:获取数据存储的进度
在后台设置全局变量,获取存入数据库进度 number_x = None number_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 });
完成,,方法比较笨,见谅