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模板标签循环回来，像这样，

{% extends "123/123-base.html" %}
{% block main %}
        {% if error %}
            {{ error }}
        {% else %}
        <ul>
            <table class="table table-style table-striped">
            <thead>
            <tr>
                <th>HOSTNAME</th>
                <th>TTL</th>
                <th>CLASS</th>
                <th>TYPE</th>
                <th>DETAILS</th>
            </tr>
            </thead>
            {% for answer in response %}
                <tr>
                {% for field in answer %}
                    <td>{{ field }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
            </table>
        </ul>
        {% endif %}
{% endblock %}

关于如何做到这一点的任何想法？

谢谢，

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);
}

Django Ajax和循环响应

1 个答案: