使用 JavaScript 渲染 Django HTML 标签答案

【问题标题】：render Django HTML tag using JavaScript使用 JavaScript 渲染 Django HTML 标签
【发布时间】：2018-10-10 14:51:40
【问题描述】：

我已经在我的项目中安装了 django-contib-cmets，并且我有一个 HTML，它显示了 cmets 列表并显示了输入新的表单。

我现在想使用 Ajax 在不刷新页面的情况下提交表单，并在成功后将提交的评论添加到列表中。

我已经完成了大部分工作，但我确信一定有更简单的方法来实现这一点。

我的问题是我是否有办法在 javascript 中呈现 Django HTML 标记，如下所示：

 document.getElementById("comments").innerHTML = {% render_comment_list for obj %}

到目前为止，这是我完成的代码：

1) 我不想更改 django-contrib-cmets 项目中的任何内容（我避免覆盖方法。

2) 我使用 django-contrib-cmets 中的标准标签来呈现 cmets 列表。

   {% render_comment_list for obj %}

3) 创建了一个处理表单提交的 JavaScript，然后在列表中创建一个新条目。

function submit_comments(event) {
    event.stopPropagation();
    $.ajax({
        type: $('#comment_form').attr('method'),
        url: $('#comment_form').attr('action'),
        data: $('#comment_form').serialize(),
        cache: false,
        dataType: "html",
        success: function (html, textStatus) {
            var comment_count_btn = document.getElementById('comment-text-vertical-btn');
            if (comment_count_btn != null) {
                if (!isNaN(parseInt(comment_count_btn.innerHTML))) {
                    comment_count_btn.innerHTML = parseInt(comment_count_btn.innerHTML) + 1 + " Comments";
                }
            }
            var comment_count_head = document.getElementById('kapua-comments-header');
            if (comment_count_head != null) {
                if (!isNaN(parseInt(comment_count_head.innerHTML))) {
                    comment_count_head.innerHTML = parseInt(comment_count_head.innerHTML) + 1 + " Comments:";
                }
            }

            if (document.getElementById("comments") != null){
                submitted_timestamp = getQueryParameter("timestamp", this.data);
                submitted_date = new Date();
                if (submitted_timestamp == null) {
                    submitted_date = new Date(submitted_timestamp);
                }

                submitted_comment = getQueryParameter("comment", this.data);
                if (submitted_comment == null) {
                    submitted_comment = "No value entered"
                }

                html_comment = "<div class=\"right-aligned\"><div class=\"comment-date\">" + submitted_date + " - " + "</div>" + submitted_comment + "</div><br><br>";
                current_html = document.getElementById("comments").innerHTML;
                document.getElementById("comments").innerHTML = html_comment + current_html;
            }

            if (document.getElementById("comment_form") != null){
                document.getElementById("comment_form").reset();
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            $('#comment_form').replaceWith('Your comment was unable to be posted at this time.  We apologise for the inconvenience.');
        }
    });
    return false;
};

提前致谢

【问题讨论】：

是的，如果脚本的内容依赖于某些服务器端数据，您可以在页面脚本中使用 Django 模板标签/过滤器。你试过了吗？
submit_comments() 函数是嵌入在 Django 模板中，还是存在于自己的 Javascript 文件中？
@RobinZigmond：你能详细说明一下，页面脚本是什么意思吗？
@WillKeeling：它存在于自己的 javascript 文件中
@SheldonLipshitz 我只是指您的 Django 模板中 <script> 标记中的脚本。（与从单独的 .js 文件加载的脚本相反，这显然不能使用 Django 模板语言。）

标签： javascript django django-contrib

【解决方案1】：

是的，在 django 中有方法，您可以使用 [escape][1] 来呈现 HTML 标签。这是一个简单的例子 -

from django.utils.html import escape
def example(request):
    return "%s<div><i>%s</i></div>" % (escape(text), escape(other_text)

还有什么疑问可以评论出来。

【讨论】：

嗨Pankaj，你建议的代码是使用python，我想调用django html标签作为我的JavaScript的一部分。
您不能在 JavaScript 文件（.js 文件）中使用 django HTML 标签，如果您想在 js 中使用 django HTML 标签，那么您必须仅在 HTML 文件中编写脚本。在.html，您可以在任何地方轻松使用 django 标签。