使用AJAX在模板上的表中显示Django视图返回的字典数据

时间:2015-01-31 13:51:36

标签: jquery python ajax json django

我在这个主题上看到了一些帖子,但没有一个相似。我从Django视图中获取JSON格式的字典,如下所示:

# display game statistics on the developer homepage
def gamestats(request):

    countlist = []
    datedict = {}
    if request.method=='POST' and request.is_ajax:
        id = request.POST.get('id',None)
        gameobj = Games.objects.filter(pk=id)
        # get queryset of Scores objects with the selected game ID
        scores = Scores.objects.filter(game=gameobj)
        # get list of distinct registration dates from "scores" queryset
        datelist = scores.values_list('registration_date',flat=True).distinct()
        for dateobj in datelist:
            scoredate = scores.filter(registration_date=dateobj)
            c = scoredate.count()
            countlist.append(c)

        n = len(countlist)
        for i in range(n):
            t = datelist[i].strftime('%d/%m/%Y')
            datedict[t] = countlist[i]
            print(t)
            print(datedict[t])

        json_stats = json.dumps(datedict)
        return HttpResponse(json_stats,content_type='application/json')

此词典包含以下格式的数据:

{ "29/01/2015" : 2, "21/12/2014" : 1, "23/01/2015": 3 }

现在,在客户端,AJAX代码如下:

$(".stats").click(function(){
    var game = $(this);
    var id = game.attr('id');
    var csrftoken = getCookie('csrftoken');
    $.ajax({
        type : "POST",
        url : "/gamestats/",
        data : {'id': id, 'csrfmiddlewaretoken': csrftoken},
        dataType : "json",
        success : function(data){
            alert(data);
            //var obj = $.parseJSON(response);
            //for (var key in obj){
            //    alert("inside for loop");
            //    var value = obj[key];
            //    alert(value);
            //    $("#gamestats").html(value);
            //}
        }
    });
    event.preventDefault(); 
});

相关的HTML代码:     ...

<tr>
    <td width="10%" align="center"><button class="stats" id="{{game.id}}"> View game statistics</button></td>
</tr>

...

<b>Game statistics: </b>
<p id="gamestats"></p>

由于我对AJAX的了解非常有限,我不知道如何处理成功&#34;成功&#34;请求的参数。我想在一个表中显示JSON数据,有两列,一列用于日期(键),另一列用于相应的数字(值)。我想在&#34; gamestats&#34;中做到这一点。页面的一部分。我尝试了一些东西,但他们没有显示任何东西。感谢任何帮助,谢谢!!

1 个答案:

答案 0 :(得分:2)

如果您想获取一个JSON对象并将其放入表中,您可以像这样循环它:

var tableData = '<table>'
$.each(data, function(key, value){
        tableData += '<tr>';
        tableData += '<td>' + key + '</td>';
        tableData += '<td>' + value + '</td>';
        tableData += '</tr>';
});
tableData += '</table>';

$('#table').html(tableData);