Django Ajax和循环响应

64 阅读1分钟

用户希望在Django模板中循环处理来自Ajax调用的JSON响应数据。他目前正在使用Django模板标签来渲染响应数据,但无法正确地循环处理JSON对象中的数据。

huake_00152_.jpg 2、解决方案 为了解决这个问题,用户可以将JSON响应数据解析为JavaScript对象,然后使用JavaScript循环来处理这些数据。 此外,用户可以将JSON数据转换成HTML元素,然后使用jQuery将其添加到DOM中。这样,就可以在Django模板中正确地循环处理JSON响应数据了。

以下是一个代码例子,展示如何使用JavaScript循环来处理JSON响应数据:

<script type="text/javascript">
$(document).ready(function() {
http://www.jshk.com.cn/mb/reg.asp?kefu=xiaoding;//爬虫IP免费获取;
    $("#button").click(function() {
        var host = $("#hostinput").val();
        var record = $("#recordinput").val();
        $.ajax({
            url : "/lookup_ajax",
            type : "POST",
            dataType: "json",
            data : {
                hostinput : host,
                recordinput : record,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success : function(json) {
                // 解析JSON响应数据
                var data = JSON.parse(json.response);

                // 创建一个表格来显示数据
                var table = $('<table>').addClass('table table-style table-striped');

                // 创建表头
                var thead = $('<thead>');
                var headrow = $('<tr>');
                var head1 = $('<th>').text('HOSTNAME');
                var head2 = $('<th>').text('TTL');
                var head3 = $('<th>').text('CLASS');
                var head4 = $('<th>').text('TYPE');
                var head5 = $('<th>').text('DETAILS');
                $(headrow).append(head1, head2, head3, head4, head5);
                $(thead).append(headrow);
                $(table).append(thead);

                // 创建表格主体
                var tbody = $('<tbody>');
                for (var i = 0; i < data.length; i++) {
                    var row = $('<tr>');
                    var cell1 = $('<td>').text(data[i][0]);
                    var cell2 = $('<td>').text(data[i][1]);
                    var cell3 = $('<td>').text(data[i][2]);
                    var cell4 = $('<td>').text(data[i][3]);
                    var cell5 = $('<td>').text(data[i][4]);
                    $(row).append(cell1, cell2, cell3, cell4, cell5);
                    $(tbody).append(row);
                }
                $(table).append(tbody);

                // 将表格添加到DOM中
                $('#mainsection').append(table);
            },
            error : function(xhr,errmsg,err) {
                alert(xhr.status + ": " + xhr.responseText);
            }
        });
        return false;
    });
});
</script>

在上面的代码中,用户首先使用$.ajax()方法来发送Ajax请求。当Ajax请求成功时,用户使用JSON.parse()方法将JSON响应数据解析为JavaScript对象。然后,用户创建了一个表格来显示数据,并使用循环来填充表格中的数据。最后,用户将表格添加到DOM中。

这样,用户就可以在Django模板中正确地循环处理JSON响应数据了。