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

时间:2016-01-07 08:52:09

标签: jquery ajax django

我正在进行一个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中。现在我如何使用此变量在我的表中显示数据? 让我们说table id ='manifest_table'。

1 个答案:

答案 0 :(得分: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');
});