将生成的 HTML 传递给 JavaScript答案

【问题标题】：Pass generated HTML to JavaScript将生成的 HTML 传递给 JavaScript
【发布时间】：2023-03-03 19:51:01
【问题描述】：

我正在尝试将生成的 HTML 字符串从 Python 传递到 Javascript。这是我的视图的简化版本（使用 Pyramid 框架）。

@view_config(route_name='view_page', renderer='templates/page.jinja2', permission='view')
def view_cosmeceutical(request):
    gen_html = markdown( ingredient.desc )
    return dict(gen_html=gen_html)

从this thread，我看到我也可以在Javascript 中使用{{ variable }}，所以在我的JS 文件中，我有一个函数试图更改id 为“content-desc”的元素的innerHTML。但我得到的只是字符串 {{ genHTML }} 而不是包含生成的 HTML 的实际变量。

function insertHTML() {
    genHTML = '{{gen_html}}';
    $('#content-desc').html(genHTML);
}

我做错了什么？

【问题讨论】：

你的函数写在哪个文件上？ {{gen_html}} 将仅在 page.jinja2 中进行模板化

标签： javascript python pyramid

【解决方案1】：

将数据和内容从服务器端 Python 传递到 JavaScript 的一种好方法是

JSON 嵌入 HTML
单独的 AJAX 调用将 JSON 对象作为 application/jsonmime 提供服务

对于嵌入方法，我会做一些事情以将数据作为 JSON 导出到页面模板：

   import json

   gen_html = ...
   javascript_data = json.dumps(dict(gen_html=gen_html))
   return dict(javascript_data=javascript_data)

然后在页面模板中将这个传递给 JavaScript 全局变量：

   <script>
          window.javascriptData = {{javascript_data}}; // Check need to escape HTML in your case
   </script>

然后在 JavaScript 中（最好保存在单独的静态 .JS 文件中）：

   $(document).ready(function() {
         $('#content-desc').html(window.javascriptData.gen_html);
   });

另外，我不会生成 HTML 以将其传递给 JavaScript。相反，我会将原始数据作为 JSON 传递给 JavaScript，然后使用客户端模板从这些数据在客户端生成 HTML。这增加了复杂性，但更“干净”和灵活。

客户端 JavaScript 的微模板引擎示例：

DOM tree based JavaScript template engines

【讨论】：

我正在使用 Python Markdown 在服务器端从 Markdown 生成 HTML，所以我不确定如何在客户端执行此操作（在JS）。在您的代码之后，window.javascriptData; 给出了一个关联数组 {"desc_html": "<h2>Test</h2> <p>This is the desc</p>"}，但 window.javascriptData.gen_html; 是 undefined。
好像是因为window.javascriptData实际上是一个字符串，而不是一个对象...
使用查看源代码找出您的 HTML 文件中的内容。