Djangoajax和循环响应

Question

我目前有以下模板

{% extends "123/123-base.html" %}
{% block main %}

    <script type="text/javascript">
        $(document).ready(function() {
            $("#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) {
                                $('#mainsection').append( "response" + json.response );
                            },
                        error : function(xhr,errmsg,err) {
                                alert(xhr.status + ": " + xhr.responseText);
                            }
                    });
                    return false;
            });
        });
    </script>

    <div id="mainsection">
    <div id="maininput" class="input-append">
        <form method="post" name="inputlookup" action="/lookup_ajax">
        {% csrf_token %}
            <input class="span2" id="hostinput" name="hostinput" type="text">
            <select title="Record" id="recordinput" name="recordinput" >
                <option value="A">A</option>
                <option value="MX">MX</option>
                <option value="Cname">Cname</option>
            </select>
            <button id="button" class="btn" type="submit">Lookup</button>
        </form>
    </div>
    <div id="mainouput">
    </div>
    </div>
{% endblock %}

但是我从服务器收到的响应我想用Django模板标记循环，像这样

^{pr2}$

有什么办法吗？在

谢谢

Answer 1

在我看来，您为AJAX调用返回了一个JSON对象。如果这是正确的，那么django就不会使用它来显示结果。您需要将success函数更改为如下所示：

success: function(json){
    // Table header
    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);

    // table body
    var tbody = $('<tbody>');
    num_answers = json.length
    for (i = 0; i < num_answers; i++) {
        var row = $('<tr>');
        var cell1 = $('<td>').text(json[i][0]);
        var cell2 = $('<td>').text(json[i][1]);
        var cell3 = $('<td>').text(json[i][2]);
        var cell4 = $('<td>').text(json[i][3]);
        var cell5 = $('<td>').text(json[i][4]);
        $(row).append(cell1, cell2, cell3, cell4, cell5);
        $(tbody).append(row);
    }
    $(table).append(row);
    $('#mainsection').append(table);
}