在Django中使用href onclick更新表而不重新加载页面

Question

我有一个列表Country显示，使用链接标签和一个表来显示Country的所有城市。我如何使用ajax点击选择国家并在表中显示我选择的国家的所有城市，而不在django中重新加载页面。这是我的代码：

<div class="row">
    <div class="col-md-3">
        <section class="panel">
            <header class="panel-heading">
                Country List
            </header>
            <div class="panel-body">
                {% if country_list %}
                    <ul class="nav prod-cat">
                        {% for c in country_list %}
                            <li><a href=""><i
                                    class=" fa fa-angle-right query-link"></i>{{ c.name }}</a></li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </div>
        </section>
    </div>
    <div class="col-md-9">
        <section class="panel">
            <header class="panel-heading" style="font-size: 20px">
                City List
            </header>
            <div class="panel-body">
                <div class="adv-table">
                    <form class="form-horizontal" action="{% url 'city_of_country' c.id %}" role="form"
                          method="post"
                          enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="form-group last">
                            <div class="col-md-12">
                                <div class="adv-table">
                                    <table class="display table table-bordered table-striped"
                                           id="dynamic-table">
                                        <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Postal Code</th>
                                            <th>Address</th>
                                        </tr>
                                        </thead>
                                        {% if city_list %}
                                            <tbody>
                                            {% for i in city_list %}
                                                <tr class="gradeX">
                                                    <td>{{ i.name }}</td>
                                                    <td>{{ i.postal_code }}</td>
                                                    <td>{{ i.address }}</td>
                                                </tr>
                                            {% endfor %}
                                            </tbody>
                                        {% endif %}
                                    </table>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
</div>

这是我的ajax代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('a.query-link').on('click', function (e) {
            e.preventDefault();
            alert();
            jQuery.ajax({
                url: '{% url 'city_of_country' c.id %}',
                method: POST,
                data: {id: jQuery(this).data('id')},
                success: function (data) {
                    jQuery('#dynamic-table').append(data);
                    alert(data)
                }
            })
        })
    })
</script>

Answer 1

您在锚点标记中缺少类名"query link"！

<li><a href="" class="query-link">
<i class="fa fa-angle-right"></i>{{ c.name }}</a></li>