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

Question

我已尝试实施解决方案 here，但我似乎无法使其正常工作。

我有一个使用 Django 模板内的循环填充的 div。在它的正下方，我有一个输入框，我可以在其中输入一些文本并单击提交。提交操作应该触发一个从服务器获取模型对象的 Jquery 脚本。然后应该将该模型对象提供给 div，并且随后应该“刷新”该 d​​iv。这里的目的是一旦 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 标签和 cmets。

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

这是点击提交后的示例：after_clicking_submit

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

Answer 1

您通过 ajax 调用的 test_login_url 视图返回的 HTML 包含模板中的 h1 元素。在您的 ajax 成功回调中，您将包含 h1 的 HTML 加载到您的 refresh-this-div div 中，但您不会删除位于容器外部的旧 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);
                }
        });
    });
});

Answer 2

$(data).filter 对我不起作用，所以我将 'data' 作为字符串插入以提取我需要的 HTML 部分。它对我有用。