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

【问题标题】：Using a href onclick to update table without reloading page in Django?在 Django 中使用 href onclick 更新表而不重新加载页面？
【发布时间】：2016-05-06 03:50:19
【问题描述】：

我有一个使用链接标签的国家列表显示和一个显示所有国家城市的表格。如何使用 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>

【问题讨论】：

代码有问题吗？
我不知道我的代码是否正确，但我的 ajax 没有运行
添加更多信息您是否遇到错误？您是否收到警报？您能提供一个 sn-p 吗？
它没有错误，但是当我添加 alert() 命令进行检查但它不显示警告对话框
这是因为没有带有类查询链接的锚。您需要将类放在锚点中，以便触发点击事件

标签： jquery python ajax django python-3.x

【解决方案1】：

您在锚标记中缺少类名“query-link”！

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

【讨论】：