如何在 django 的表中显示来自 ajax 响应的列表数据答案

【问题标题】：How to display list data from ajax response in table in django如何在 django 的表中显示来自 ajax 响应的列表数据
【发布时间】：2025-12-17 10:35:01
【问题描述】：

我正在做一个 ajax POST 调用，它返回一个包含 4 个列表的压缩列表作为响应。

ajax 调用：

$('[name="start_manifest"]').on('click', function(event){
    event.preventDefault();
    var channel = $('[name="channel_name"]').val();
    var courier = $('[name="courier_name"]').val();
    $.ajax({
        url : "/manifest/",
        type : "POST",
        data : {action:'start_manifest',
                channel:channel,
                courier:courier},

        success : function(response) {
            var order_data = response.order_data;
            $.niftyNoty({
                type:"primary",icon:"",title:"Start Scanning Orders",message:"Current Manifest Number: " + response.manifest_number,container:"floating",timer:5000
            });
        },
        ....

我的 Django 视图：

if request.POST.get('action') == 'start_manifest':
    channel = request.POST.get('channel')
    courier = request.POST.get('courier')
    manifest_data = manifest.startManifest(channel, courier)
    response_data = {}
    response_data['manifest_number'] = manifest_data[0]
    response_data['order_data'] = manifest_data[1]
    return HttpResponse(json.dumps(response_data),content_type="application/json")

这里manifest_data[1] 是一个压缩列表，例如：

manifest_data[1] = zip(LIST_1, LIST_2, LIST_3, LIST_4)

通常我可以从压缩列表中填充表格，例如：

{% for a,b,c,d in order_data %}
<tr>
    <td>{{a}}</td>
    <td>{{b}}</td>
    <td>{{c}}</td>
    <td>{{d}}</td>
</tr>
{% endfor %}

我的问题是：

如何从压缩列表中填充表格作为对 ajax 调用的响应？就我而言，我将列表存储在var order_data 中。现在我如何使用这个变量在我的表中显示数据？假设表 id = 'manifest_table'。

【问题讨论】：

您的问题与 Python/Django 有什么关系？这是一个纯 html/js 的问题，后端可以是 PHP、Ruby 甚至 Perl/CGI，它不会改变任何东西。
感谢您的信息。我的后端在 django 中，所以我将其包含在内。
你必须为此编写 JavaScript。
@ManishGupta 后端在这里完全无关紧要。你想要的是从你的页面发出一个 ajax 请求并相应地更新你的页面的 dom - 这实际上并不是什么新的 FWIW - 这是一个纯粹的前端编程问题。
@brunodesthuilliers 我删除了标签。

标签： jquery ajax django

【解决方案1】：

我使用此代码遍历数组并将数据添加到表行。

var order_data = response.order_data;
$('#manifest_table').html('');
$.each(order_data, function(i, item) {
    $('<tr id='+ order_data[i][3] +'>').html('<td>'+ inp +'</td><td style="text-center" >' + order_data[i][0] + '</td><td style="text-center" >' + order_data[i][1]  + '</td><td style="text-center" >' + order_data[i][2]  + '</td><td style="text-center" >' + order_data[i][3]  + '</td>').appendTo('#manifest_table');
});

【讨论】：