将来自ajax的django视图结果添加为模板中的表答案

【问题标题】：Adding django view result from ajax as table in template将来自ajax的django视图结果添加为模板中的表
【发布时间】：2024-05-22 05:30:02
【问题描述】：

我有一个 django 模型，我认为我正在聚合几列和过滤结果并返回如下

def show_grid_summery(request):
    id = request.GET.get('id', None)

    context = {
        "summery": [],
    }

    result = Records.objects.filter(grid_id_id = id).aggregate(Sum('house_count'), Sum('point_count'))
    if len(result) != 0:
        context["summery"].append([result['house_count__sum'], result['point_count__sum']])


    return JsonResponse(context)

在模板上我使用 ajax 得到结果

$.ajax({
                    url: 'ajax/summery/',

                    data: {
                      'id': ID
                    },

                    dataType: 'json',

                    success: function (data) {
                        alert(data);

                        var trHTML = '';
                        document.getElementById('summaryLabel').innerHTML = '';

                        $.each(data.summery , function (item) {
                            trHTML += '<tr><td>' + item[0] + '</td><td>' + item[1] + '</td></tr>';
                        });
                        $('#summaryLabel').append(trHTML);
                    }

现在我想将结果记录（2 列）填充为 #summaryLabel 标记内的表格。（最好也带有标题）。但是经过多次不同的尝试后，我无法解决它。

html部分是

<table id="summaryLabel">
            <p>information.</p>
</table>

【问题讨论】：

你能用 HTML 代码更新吗？特别是#summaryLabel 的代码
它只是带有 id 的 div。已更新
目前发生了什么 - 您是否看到添加到表中的行？ JSON 响应看起来是否正确 - 它是否包含您期望的数据（使用浏览器开发人员工具中的网络选项卡查看响应）。
是的响应即将到来。我使用错误的索引和格式访问 json。

标签： javascript python django

【解决方案1】：

jQuery$.each()函数传递两个参数，第一个是数组索引，第二个是对象。因此，在您的代码中，您的 item 变量似乎包含索引，这不是您想要的。

试试：

$.each(data['summery'] , function (i, item) {
    trHTML += '<tr><td>' + item[0] + '</td><td>' + item[1] + '</td></tr>';
});

或者只是

$.each(data['summery'] , function () {
    trHTML += '<tr><td>' + this[0] + '</td><td>' + this[1] + '</td></tr>';
});

jQuery $.each() 记录在这里：http://api.jquery.com/jquery.each/

【讨论】：

是的，这几乎奏效了。根据我的 json 响应，只有我必须在每个函数中使用 data['summery'] 而不是 data.summery。
很高兴它有帮助！我将为未来的搜索者编辑我的答案。