如何使用这个字典在javascript中显示模板中的文件信息?

时间:2013-06-18 10:50:53

标签: javascript django dictionary

我有一个这样的字典,我已经传递给Django中的模板:

files = {
    "20090209.02s1.1_sequence.txt": [645045714, 2584.9807732105255, 137625600], 
    "20090209.02s1.2_sequence.txt": [645045714, 2569.1707730293274, 158859264]
}

键是file_name,值是数组。数组中的第一个元素包含total_file_size, second_element -> duration文件传输已启动和third element -> number of size transferred

我列出了表格中的文件信息以及remPercentage和remTime来传输文件。

  {% for choice in overview %}              
        <tr>
            <td><input type="checkbox" name="choice_stop" id="choice{{ forloop.counter }}" value="{{ choice.id }}" onchange="checkChecked_stop()"/></td>
            <td><label for="choice{{ forloop.counter }}">{{ choice.name }}</label></td>
            <td>{{ choice.source }}</td>
            <td><div id="remPercentage{{ forloop.counter }}"></div></td>
            <td>{{ choice.start_date }}</td>
            <td><div id="remTime{{ forloop.counter }}"></div></td>
            <td>{{ choice.human_size }}</td>
            <td><input type="checkbox"  disabled {{ choice.flag_email }} /></td>
        </tr>
  {% endfor %}

这是我的名为changeData()的Javascript函数,它正在命中服务器并获取remPercentageremTime

var interval;

var counter=0;
var length;
var speed;
var duration;

function changeData() {
    var url="/ajax_call_size";
    var xmlh=new XMLHttpRequest();
    xmlh.open("GET",url,false);
    xmlh.send(null);
    var resObj=xmlh.responseText;

    var total_size = get the total_size
    var transfer_duration = get the transfer_duration
    var transfer_size = get the transfer_size
    length=total_size.length;
    for(var i=0;i<length;i++) {

        if(typeof(transfer_size[i])!="undefined") {
            transfer_per = parseInt(100-(transfer_size[i]/total_size[i] * 100));
            remaining_size =  total_size[i] -  transfer_size[i];

            if(transfer_per!=0) {
               eTime_remaining = (transfer_duration[i]/transfer_size[i])*(total_size[i]-transfer_size[i]) ;  
               document.getElementById("remPercentage"+parseInt(i+1)).innerHTML=transfer_per+"%";;
               document.getElementById("remTime"+parseInt(i+1)).innerHTML=secondsToString(eTime_remaining);
            } else {
                document.getElementById("remPercentage"+parseInt(i+1)).innerHTML="1%";
               document.getElementById("remTime"+parseInt(i+1)).innerHTML="1 sec";
            }
        } else {
            document.getElementById("remPercentage"+parseInt(i+1)).innerHTML="completed";
            document.getElementById("remTime"+parseInt(i+1)).innerHTML="completed";
        } 
    }
    counter+=1;
}

setInterval("changeData()",5000);

如何提取字典数据并将信息放在模板中的相应文件列中?感谢

1 个答案:

答案 0 :(得分:0)

使用ajax调用: 说出你的ajax_template.html

{% for choice in overview %}

        <tr>
        <td><input type="checkbox" name="choice_stop" id="choice{{ forloop.counter }}" value="{{ choice.id }}" onchange="checkChecked_stop()"/></td>
        <td><label for="choice{{ forloop.counter }}">{{ choice.name }}</label></td>
        <td>{{ choice.source }}</td>
        <td><div id="remPercentage{{ forloop.counter }}"></div></td>
        <td>{{ choice.start_date }}</td>
        <td><div id="remTime{{ forloop.counter }}"></div></td>
        <td>{{ choice.human_size }}</td>
        <td><input type="checkbox"  disabled {{ choice.flag_email }} /></td>
        </tr>
        {% endfor %}

您的观点是:

def view(request):
    if request.is_ajax():
         # this view get called at '/view/' url 
         #do your calculations here instead in javascript function
         # in case your fetching some variables from client side then send them in POST or GET .. 
         return render('ajax_template', locals())

现在在ajax中这样做:

$.ajax({
      url:'/view/',
      success:function(result){
          $('#div').html('').html(result)
 }})

你的$('#div')是你要渲染结果的模板中的html div