如何在 Django 模板上传递 Python 列表并在 JavaScript 中使用它？

Posted 2023-02-24

【中文标题】如何在 Django 模板上传递 Python 列表并在 JavaScript 中使用它？

【英文标题】：How do I pass Python list on Django template and use it in JavaScript?

【发布时间】：2020-05-26 18:26:37

【问题描述】：

我有一个 python 列表，里面有列表。我将它渲染成 Django 模板以在我的 javascript 中使用。我做了json.dumps(postImages)，然后用let postImages = postImages|safe 逃脱了。即使我的 lint 发出警告，它也有效！但问题是，主列表中有列表。所以每当我这样做时，postImages[0].length 或postImages[0][0]，它认为它是一个字符串，现在是一个列表。

<script>
  var postImages =  postImages|safe ;
  const divCard = document.querySelector('.card');
  const divDesc = document.querySelector('.description');
  console.log(postImages.length)
  for (let i = 0; i < postImages.length; i++)
      let img = document.createElement('img');
      img.classList = ['resize_no_stretch', 'images']
      img.setAttribute('src', postImages[i][0]);
      console.log(postImages[i][0])
      divCard.insertBefore(img, divDesc);
  ;
</script>

【问题讨论】：

好像你生成了一个字符串，而不是一个列表。如果你有一个正确的 JSON，那么你应该简单地解析它来使用它。如果你不这样做......我建议生成 JSON，因为它比尝试消耗相当于 JS 随机格式的内容要简单得多。

您的模板将帮助您了解您是如何完成此编码的，请始终发布一段代码，以帮助其他人为您提供解决方案

添加了代码，如果有任何问题，请告诉我！并感谢你们的帮助！

@MikeYaBoii 你当然会得到一个字符串——这就是你用var postImages = ' postImages '; 明确要求的（你认为 postImage 周围的引号在做什么？）。如果您想要一个 javascript 列表，只需遵循 Valz 的建议，将 jsonified 列表传递给您的模板。 说到这里，你为什么在这里使用 JS 呢？你可以在模板渲染时使用模板语言来做同样的事情。

嗯，我试过做 json 转储和 escapejs。但它似乎没有工作

【参考方案1】：

现在解决了。 我所做的是，我在视图中导入了 json，而不是正常渲染它，我 json.dumps() 它。

views.py：

import json

postImages = json.dumps(list_of_lists)

return render(request, 'craiglist_clone/results.html', 'postImages' : postImages)

django 模板（craiglist_clone/results.html）：

let postImages =  postImages|safe 

你的 lint 我给你警告，但它仍然有效！