Question

我尝试过实施解决方案here，但似乎无法使其正常运行。

我有一个使用Django模板中的循环填充的div。在下面，我有一个输入框，我可以在其中键入一些文本，然后单击提交。 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

从您通过ajax调用的test_login_url视图返回的HTML包含模板中的h1元素。在您的ajax成功回调中，您将该HTML（包括h1）加载到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 部分。它对我有用。

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

2 个答案: