当我执行 AJAX 调用以更改查询集时，所有 javascript 都停止在我的子模板上工作

Posted 2023-02-24

【中文标题】当我执行 AJAX 调用以更改查询集时，所有 javascript 都停止在我的子模板上工作

【英文标题】：All javascript stops working on my child template when I perform an AJAX call to change the queryset

【发布时间】：2017-06-26 16:50:34

【问题描述】：

我有一个如下所示的comments.html 子模板：

<div class="commentsContainer">
    % for comment in comment_list % 

    ...


         comment.text  

    ...

    %  endfor %

</div>

当我点击一个按钮时，我调用了这个 AJAX 函数：

$('.comments_new').on('click', function() 
    $.ajax(
        type: 'GET',
        url: '/new_comments/',
        data: 
        ,
        success: function (data) 
            $('.commentsContainer ').replaceWith(data);
        
    )
);

调用这个视图来改变查询集（初始查询集是comment_list = Comment.objects.filter().order_by('-score__upvotes'):

def new_comments(request):
    if request.is_ajax():
        comment_list = Comment.objects.filter().order_by('-timestamp')
        html = render_to_string('comments.html', 'comment_list': comment_list)
        return HttpResponse(html)

这成功地交换了查询集，但是由于某种原因，新加载的模板/查询集上没有 javascript 工作。我什至尝试只使用一个简单的.css() jquery 函数，但它也不起作用。只有常规的 CSS 有效。谁能告诉我为什么会发生这种情况以及我该如何解决？

编辑：

拨打电话时，我的终端中也出现此错误：UserWarning: A % csrf_token % was used in a template, but the context did not provide the value. This is usually caused by not using RequestContext.

edit2：使用JsonResponse的新呼叫

def new_comments(request):
    if request.is_ajax():
        comment_list = Comment.objects.filter().order_by('-timestamp')
        html = 'comment_list': comment_list
        return JsonResponse(html)

raise TypeError(repr(o) + " is not JSON serializable")

TypeError: <QuerySet [<Comment: qwdjkqbwkdjbqd>, <Comment: woeifnoeinfw>, <Comment: example>, <Comment: enlaasd>, <Comment: aelanfaf>, <Comment: asdasda>]> is not JSON serializable

【问题讨论】：

你的回复是html？

是吗？ comments.html 扩展了具有 base.js javascript 文件的基本模板。

不是，响应的 ajax url: '/new_cmets/'，是 html 内容吗？

是的 render_to_string 将其转换为 html 内容

【参考方案1】：

一些想法：

我会用JsonResponse 更改您的HttpResponse。应该不是问题，但谁知道（我等待你的反馈）。请记住返回一个带有以新 HTML 作为值的键的 dict。 您应该将replaceWith() 交换为html()。您正在设置新的 HTML，因此可以更轻松地防止意外行为。

【讨论】：

刚试过JsonResponse，我得到了raise TypeError(repr(o) + " is not JSON serializable")。代码在我的编辑中。

是的，您正在尝试进行自动序列化，而 Django 并没有这样做。您刚刚将查询集结果传递给 dict（创建 raise TypeError(html["comment_list"]) 以查看我说的内容）。你需要做这样的事情：for obj in comment_list: html["comment_list"].append("id": obj.id, "text": obj.text, ...)

你能解释一下这是做什么的吗？我正在编写您的代码，但我不确定目标是什么。 html = 'comment_list': comment_listfor comment in comment_list:html['comment_list'].append('id': comment.id, 'text': comment.comment_text, 'user': comment.user)return JsonResponse(html)

啊，我的错，对不起。只需执行 html = "comment_list": render_to_string('comments.html', 'comment_list': comment_list) ，然后在 AJAX 回调中执行 data.comment_list。现在应该可以工作了。明天给你检查，现在我要睡觉了，快起床上班了。

不用担心，但我会保留您发布的 for 循环吗？