jquery☞伪进度条

前言

点击->触发脚本jquery->脚本访问url->django view(show_progress)->view返回数据给脚本jquery->脚本jquery拿到进度数据百分比->更新进度条->重复访问url->直至进度条数据100%->终止访问url.

具体步骤

点击

点击提交按钮，通过id “submit” 找到脚本

        <div class="item1">
          <a href="{% url 'assets:ssllist' %}">返回</a>
          <button id="submit" class="mybtn" type="submit">提交</button>
        </div

脚本jquery

    <script>
    $(function () {
      $('#submit').on('click', function () {     // 触发 click 动作，执行 function
        $('#prog_out').attr("class","progress");
	      var sitv = setInterval(function(){    // 添加一个间隔期函数setInterval，它有两个参数，参数1是执行函数function，参数2是间隔时间
              var show_progress_url = "{% url 'assets:showprogress' %}"; // 变量 show_progress_url
                $.getJSON(show_progress_url, function(res){    // 访问 show_progress_url，并将view视图的结果res传递给 function 函数，并执行 function(res) 
                if(res === 100){       // 若 view视图返回100，则修改动作条颜色为 success，并且清空计时器并退出
                  $('#prog_out').attr("class", "progress progress-bar bg-success");
                  clearInterval(sitv);
                }
                console.log("currect progresspct:"+res);  // 打印当前进度
                  $('#prog_in').width(res + '%');     // 改变进度条进度，注意这里是内层的div， res是后台返回的进度
                  $('#prog_in').val(res);   //改变进度条的值
                });
              }, 
          1000);   // 间隔期函数setInterval,第二个参数，每1秒查询一次后台进度
      });
    })
    </script>

脚本访问URL

通过上述JS脚本，访问show_progress_url变量

django view视图

def show_progress(request):
    if request.user.is_authenticated:
        loginuser = request.user.username
        #progresspct = cache.get_or_set(loginuser,0)
        print('当前创建证书的用户是:' + loginuser)
        progresspct = cache.get(loginuser)
        print("百分比:{0}".format(progresspct))
        if progresspct == 100:
            print('删除缓存')
            cache.delete(loginuser)
            return JsonResponse(progresspct, safe=False)
        progresspct += 1
        cache.set(loginuser,progresspct)
        return JsonResponse(progresspct, safe=False)