Django 模板未在浏览器中渲染

Question

我正在尝试为我的网页应用设置一个Django视图，目的是在文件上传完成后，页面能够自动跳转，并且上传进度条显示达到100%。我在网上查了很多资料，尝试了几种方法，但都没有成功。

当我使用

render(request, 'template_name')

时，应用程序只是把'template_name'的纯文本返回到控制台，而不是在浏览器窗口中渲染出来。上传进度条的原始页面在返回这个纯文本后仍然保持不变。

我的视图代码如下：

def barUpdate(request):
    importid = request.GET.get('impid')
    response_data = {}
    import_status_dict = get_import_status(importid)
    status_id = import_status_dict['returnval']
    import_status_info = import_status_dict['data_row']
    import_status_info = import_status_info[0]
    total_rows = import_status_info['total_data_rows']
    rows_analyzed = import_status_info['number_of_rows_analyised']



    if status_id != 2:
        if (rows_analyzed != None and total_rows != None):

            percent_complete = int((float(rows_analyzed)/total_rows)*100) 
            response_data['value'] = percent_complete

        if 'percent_complete' in locals():
            if response_data['value'] >= 100:
                #return render(request,'statustool/completed.html',{'importid':importid,'username':username,'failedparameters':new_failed_param_group,'failedsources':failed_sources,'failedparametergroups':failed_parameters_group,'failedsitegroups':failed_sites_group,'sources':get_sources(), 'failedunits':failed_units})
                    #Right here I would like to render a new template in my browser, although this is just a dummy template I created for testing
                return render(request,'statustool/test.html')
            response = HttpResponse(json.dumps(response_data), content_type="application/json")
            return response
        else: 
            response_data['value'] = 0
            response = HttpResponse(json.dumps(response_data), content_type="application/json")
            return response

我的测试模板如下，它里面没有任何需要从视图传入的变量：

<html>
<head>
    test
</head>
<body>
<h1>Finished with data insert!</h1>
</body>



</html>

我是不是漏掉了什么？

如果有帮助的话，当前的页面上有一个状态栏，样子如下，并且使用了一个叫做status的JavaScript函数，每秒发一次GET请求来获取上传状态，以更新状态栏。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CACW: Status - Processing</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<!-- Le styles -->
<link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/boostrap-responsive.css" rel="stylsheet">
    <style>
        body,html{
            padding-top: 30px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
        .container{
            min-height:100%;
        }
        .footer{
            height:40px;
            margin-top:-25px;
        }
        .barcontainer{
          width: 100px;
          color: blue;
        }

         progress {  
            background-color: whiteSmoke;
            border-radius: 2px;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;

            width: 250px;
            height: 20px;

            position: relative;
            display: block;
        }  
        </style>


        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript" src="{{ STATIC_URL }}js/d3examples.js"></script>
        <script type="text/javascript">
        var importNum = {{importid}}


          function status(){
            var barProgress = window.setInterval("getProgress(importNum);", 1000);
          }


          var url=api_server_address+"import/status/update/";
          var getProgress =  function(importid) {
              $.ajax({
              url: "https://cacw.luc.edu/status/update/",
              data: { impid: importid },
              type: "GET",
              dataType: "json"
              })
                .done(function(data){
                $('#progressBar').val(data['value']);
                console.log(data);
            });
          }

        </script>    

</head>
<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">CACW</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="/login/authed/userhome/">Home</a></li>
              <li><a href="#wiki">Wiki</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
             <a class="btn btn-primary pull-right" href="/logout">Logout</a>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>



<body onload="status({{importid}});">
<div class="container">
    <div class="page-header">
         <p><h2>Import {{ importid }} Status.</h2></p>
     {{percent_complete}}


      <progress id="progressBar" value={{status}} max="100"></progress>


    </div>
</div>



    <div class="footer">
        <div class="navbar-fixed-bottom">
            <hr>
            <div class = "container" style="text-align: center">

                <p> <a href = " "> Help </a>  - <a href = " "> Information </a>- <a href = " "> Contact </a>- <a href = " ">  Wiki </a> <p>
                <img src="{{ STATIC_URL }}img/luc_logo.jpg"></img>


            </div>
        </div>
    </div>


</body>

</html>

django 模板渲染文件上传进度条视图函数 ajax请求状态栏 javascript函数

Django 模板未在浏览器中渲染

1 个回答

撰写回答