Django render_to_string 不呈现 javascript答案

【问题标题】：Django render_to_string does not render javascriptDjango render_to_string 不呈现 javascript
【发布时间】：2021-04-14 07:16:57
【问题描述】：

我正在开发一个 Django 项目，在该项目中我使用 render_to_string 从后端预渲染 HTML 模板，然后将它们发送到前端作为对 ajax 调用的响应。

        rendered_html.append(
            [render_to_string("webapp/popup.html", context=shop_context), location['Logo'], location['LONG'],
             location['LAT'], location['id']])

    return JsonResponse({"rendered_html": rendered_html})

我正在使用 javascript 将这个 render_html 附加到前端。 HTML 代码和 Django 上下文变量工作正常，但文件中的 javascript 根本不起作用。如果我从开发人员的控制台中看到元素部分，我可以看到包含 javascript，但它不起作用，甚至一个小的 console.log 也不起作用。

有解决方法还是我做错了什么？任何帮助将不胜感激。

【问题讨论】：

这能回答你的问题吗？ Dynamically load JS inside JS
@AbdulAzizBarkat 不，它没有。这是在现有js中导入js的解决方案。我需要在后端预渲染 html 文件并且 javascript 不渲染。
您说：“我可以看到包含 javascript，但它不起作用”当然这意味着 javascript 已呈现。这个问题有很多与你类似的用例的答案。此外，您的问题不是可重现的，您没有提供足够的信息来重现您的问题，请参阅如何写minimal reproducible example。

标签： javascript html django

【解决方案1】：

面临同样的问题。为了解决所描述的问题，我将 js 代码放在一个单独的 js 文件中，在 html 中，我在 script 标签中指明了它的路径。然后，当我得到 (render_to_string in view) 返回的代码行时，我使用正则表达式搜索脚本标签并加载它们在 src 中编写的文件

模板

一种方式：

$.ajax({
    type: "GET",
    url: '/get_html/',
    data: {
       
    },
    success: function(data) {
        const content = document.querySelector('.main__content.inner');
        content.innerHTML = data['html'];
           
        const scripts = data['html'].match(/<script (.*?)<\/script>/g)
        
        scripts.map((script) => { 
            script = script.replace('"><\/script>', '').replace('<script src="/', '');
                console.log(script)
                loadJS(script);
            })
        },
    });


function loadJS(file) {
    const content = document.querySelector('.main__content.inner');
    const jsElm = document.createElement("script");
    jsElm.src = file;
    content.appendChild(jsElm);
}

2路：

$.ajax({
    type: "GET",
    url: '/get_html/',
    data: {
        },
    success: function(data) {
        $(".main__content.inner").html(data['html']);
            
       },
    failure: function(data) { 
        console.log('Get html error');
       }
    });

查看

class GetHtmlView(View):
    def get(self, request):
        if request.is_ajax():
            html = render_to_string('your html path')
            return JsonResponse({'html': html})

如果您有任何其他问题，我很乐意回答。我也想看看你是否找到了解决这个问题的另一种方法。

【讨论】：