如何在 Django 模板中使用 Jquery/Ajax 正确刷新 div

Question

我已经尝试在这里实现该解决方案，但我似乎无法使其正常工作。

我有一个 div，它是使用 Django 模板内的循环填充的。就在其下方，有一个输入框，我可以在其中输入一些文本，然后单击“提交”。Submit 操作应该触发一个 Jquery 脚本，该脚本从服务器获取模型对象。然后应将此模型对象提供给 div，并且随后应“刷新”div。这里的目的是，一旦 div 被“刷新”，for 循环访问的变量就会被更新，从而显示额外的新结果。

我的模板代码：

<h1> This is a Test Ajax Page</h1>
<div id="refresh-this-div">
    {% for comment in question.comment_set.all %}
        <p class="">{{ comment.body }}</p>
    {% endfor %}
        <input id="my-text-input-id" type="text" />
        <button type="submit" class="add-comment-button">Add</button>
    </div>
</div>

我的 Jquery：

<script type="text/javascript">
    $(document).ready(function() {
        $("button.add-comment-button").click(function() {
            var com_body = $('#my-text-input-id').val();
            $.ajax({
                    url: '/test_login_url',
                    success: function(data) {
                    $('#refresh-this-div').html(data);
                    }
                  });
        });
    });
</script>

我的看法：

def test_login_url(request):
    question = Question.objects.get(id=1)
    com = Comment(question=question, body='This is a new Comment!')
    question.comment_set.add(com)
    return render_to_response('application/ajax_test_template.html', { 'question': question })

当我单击“提交”按钮时，div 会刷新，但是刷新的 div 部分现在包含 h1 标记的副本。当我多次单击“提交”时，会填充其他 h1 标签和评论。

以下是点击之前的页面示例：before_clicking_submit

这是单击“提交”后的示例：after_clicking_submit

我已经仔细检查过我的实现是否与我之前引用的解决方案尽可能相同，但是，我觉得我可能在这里遗漏了一些简单的东西。使用新的更新变量刷新 div 的正确方法是什么？

Answer 1

test_login_url通过 ajax 调用的视图返回的 HTML包含模板中的 h1 元素。在 ajax 成功回调中，您将包含 h1 的 HTML 加载到refresh-this-divdiv 中，但不会删除位于容器外部的旧 h1 元素。使用浏览器上的开发人员工具快速检查 DOM 应该可以说明发生了什么。

最简单的解决方法可能是将当前模板的内容包装在容器中。

模板代码：

<div id="refresh-this-div">
    <h1> This is a Test Ajax Page</h1>
    {% for comment in question.comment_set.all %}
        <p class="">{{ comment.body }}</p>
    {% endfor %}
    <input id="my-text-input-id" type="text" />
    <button type="submit" class="add-comment-button">Add</button>
</div>

jQuery：

$(document).ready(function() {
    $("button.add-comment-button").click(function() {
        var com_body = $('#my-text-input-id').val();
        $.ajax({
                url: '/test_login_url',
                success: function(data) {
                    // grab the inner html of the returned div 
                    // so you don't nest a new div#refresh-this-div on every call
                    var html = $(data).filter('#refresh-this-div').html();
                    $('#refresh-this-div').html(html);
                }
        });
    });
});