Django模板未被浏览器渲染

时间：2014-06-12 19:59:42

标签： python django

我正在尝试为我的网络应用程序设置django视图，该视图会在文件上传完成后重定向页面，并显示上传进度的状态栏达到100％。我在网上环顾四周，试图以几种方式做到这一点，但似乎没有任何工作。当我使用

render(request, 'template_name')

应用程序只返回＆＃39; template_name＆＃39;的纯文本。到控制台而不是在浏览器窗口中呈现它。返回此纯文本后，加载栏的原始页面保持不变。

我的观点如下所示

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>

1 个答案:

答案 0 :(得分：2)

由于您只是在AJAX调用中获取数据，因此永远不会更新您的页面（从服务器端）。您可以做的是在服务器响应中添加一个标志/对象/参数，以指示上传完成的时间，然后在客户端，在上传完成时重定向到该位置。

服务器端：

# code shortened a bit... continues from after line defining percent complete
response_data['value'] = percent_complete if 'percent_complete' in locals() else 0
response_data['done'] = response_data['value'] >= 100

return HttpResponse(json.dumps(response_data), content_type="application/json")

客户端：

var getProgress =  function(importid) {
    $.ajax({
        url: "https://cacw.luc.edu/status/update/",
        data: { impid: importid },
        type: "GET",
        dataType: "json"
    })
    .done(function(data) {
        if(data['done']) {
            // I forget if this is how to do a redirect but it's where you put it
            location.href('whatever/your/url/is');
        } else {
            $('#progressBar').val(data['value']);
            console.log(data);
        }
    });
  }
相关问题
最新问题