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

【问题标题】：Passing JSON in Django Template to Standalone Javascript File将 Django 模板中的 JSON 传递给独立的 Javascript 文件
【发布时间】：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>}) 中？

标签： javascript json django django-templates django-views

【解决方案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()