Question

我正在构建Django网络应用，并且尝试使用Django模板变量将JSON对象发送到我的javascript代码。

# views.py

import json

def get_autocomplete_cache():
   autocomplete_list = ["test1", "test2", "test3", "test4 - don't delete"]
   return json.dumps(autocomplete_list)

<!-- html page -->
<script>
   // Things i've tried

   autocomplete = {{ autocomplete_list|safe }};
   autocomplete = '{{ autocomplete_list|safe }}';
   autocomplete = JSON.parse('{{ autocomplete_list|safe }}');
</script>

如果我将{{ autocomplete_list|safe }用单引号引起来，例如'{{ autocomplete_list|safe }}'，则test4 - don't delete中的单引号会弄乱变量，并且

未捕获的SyntaxError：意外的标识符。

但是，如果我将其保留为{{ autocomplete_list|safe }}，则HTML文本会以红色下划线将其突出显示为错误。我在这里做什么错了？

Answer 1

我已经重写了您的代码，因为我了解您的意思是要在两个变体中使用它（如下所示），它对我来说很好用。也许，如果您发布更详细的代码，将更容易找出问题所在。

def view_1(request):
    ...
    return render(request, 'template.html', {'autocomplete_list': ["test1", "test2", "test3", "test4 - don't delete"]})

def view_2(request):
    ...
    return render(request, 'template.html', {'autocomplete_list': json.dumps(["test1", "test2", "test3", "test4 - don't delete"])})

<script>
    var autocomplete_list = {{ autocomplete_list|safe }};
</script>

您也可以尝试SafeString： https://docs.djangoproject.com/en/2.2/ref/utils/#module-django.utils.safestring

from django.utils.safestring import SafeString

def view(request):
    ...
    return render(request, 'template.html', {'autocomplete_list': SafeString(autocomplete_list)})

也许json-script过滤器会为您工作： https://docs.djangoproject.com/en/2.2/ref/templates/builtins/#json-script

用法：

{{ value|json_script:"hello-data" }}

输出：

<script id="hello-data" type="application/json">{"hello": "world"}</script>

在JS中访问

var value = JSON.parse(document.getElementById('hello-data').textContent);

双引号内的单引号弄乱了JavaScript代码

1 个答案: