将 Django 模板中的 JSON 传递给独立的 Javascript 文件

Posted 2023-02-24

【中文标题】将 Django 模板中的 JSON 传递给独立的 Javascript 文件

【英文标题】：Passing JSON in Django Template to Standalone Javascript File

【发布时间】：2015-11-23 04:23:12

【问题描述】：

我的views.py中有以下代码：

from django.shortcuts import render
from django.shortcuts import render_to_response
from django.http import HttpResponse
import json, requests

platformReq = requests.get(platformUrl, headers='Authorization': 'Token token="1234"')

platformData = json.loads(platformReq.text)
return render_to_response('find.html','platformList':platformData)

在我的模板文件中，我有这个：

<script src="% static "js/standalone.js" %" type="text/javascript"></script>
  <script>
    # this is where it fetches the json and formats it correctly #
    var js_variable = platformList | jsonify;
    console.log(js_variable);
    function_in_standalone_js(js_variable);
</script>

从该 console.log() 正确输出 JSON，但出现错误：

ReferenceError: function_in_standalone_js 未定义

在我的独立 Javascript 中：

var function_in_standalone_js = function(js_variable)

var options = js_variable['platforms'];
console.log(options)

这是输出的内容，以及 console.log() 给出的内容（不止 3 个，但我不想粘贴整个内容）：

“平台”：[“slug”：“土星”，“id”：32，“名称”：“世嘉土星”，“slug”：“mac”，“id”：14，“ name": "Mac", "slug": "vc", "id": 47, "name": "Virtual Console (Nintendo)"]

提前致谢！

【问题讨论】：

你试过在浏览器控制台中运行function_in_standalone_js(js_variable);吗？

@IanAuld 是的，我得到了同样的“未定义”错误。

js/standalone.js 是否在您的浏览器开发工具的网络选项卡中显示 404？

@IanAuld 不，在网络选项卡中显示：“304：未修改”。即使我进入“查看页面源代码”，我也可以访问该文件并查看其内容。

您是否尝试将您的内嵌脚本包装在$(document).ready(function()<inline stuff here>) 中？

【参考方案1】：

由于模板中 JS 的加载时间不同，您应该将内联 JS 包装在 $(document).ready(function()...) 中，以确保它仅在文档的其余部分（包括外部 JS 文件）加载后运行。

<script>
    $(document).ready(function()
      var js_variable = platformList | jsonify;
      console.log(js_variable);
      function_in_standalone_js(js_variable);
    );
</script>

【参考方案2】：

可能是您的standalone.js 在模板中的代码之后被加载，因此出现错误

【讨论】：

我该如何纠正这个问题？在我的模板文件中，我在列出代码之前将standalone.js 作为脚本文件列出。 编辑： 即使将独立的 js 放入我的 中，我仍然会收到错误。

做一件事定义一个没有参数的简单js函数在你的js文件中定义它并尝试在console.log()之前调用它，这样你就可以知道它是否加载了

我仍然得到错误：ReferenceError: showTest is not defined 在独立的 JS 文件中：function showTest() console.log("Test!")

@AllenFernandes 显然我上面的回答没有回答你的问题......即使那个错误意味着它没有加载，显然我必须特别说明。不，它仍然无法在 console.log() 之前加载函数 showTest()