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

Question

我看到了一些关于这个主题的帖子，但没有一个非常相似。我正在从 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 的了解非常有限，我不知道如何处理请求的“成功”参数内的响应。我想在一个表中显示 JSON 数据，有 2 列，一列用于日期（键），另一列用于相应的数字（值）。我想在页面的“gamestats”部分执行此操作。我尝试了一些东西，但它们没有显示任何东西。感谢您的帮助，谢谢！

Answer 1

如果你想获取一个 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);