Django 模板 JS 变量 'safe' 方法不将数据传递到自定义 js 文件？

Question

我正在尝试将 google api 键传递到我在 Django 中的自定义 js 文件中，该功能用于自动完成 google 位置 api 搜索，但目前它不起作用，如果我将实际密钥直接放入 .getScript 函数中，例如：

https://maps.googleapis.com/maps/api/js?key=XXX&libraries=places"

然后搜索功能可以使用，但是当前的设置还打算隐藏 api 键，但它不起作用，我显然遗漏了一些东西，感谢任何想法？

django 设置：

GOOGLE_API_KEY = "XXX"

base.html

<script src="{% static 'js/google_places.js' %}"></script>

views.py

{'google_api_key': settings.GOOGLE_API_KEY}

google_places.js

$.getScript("https://maps.googleapis.com/maps/api/js?key=" + google_api_key + "&libraries=places")
.done(function( script, textStatus ) {
    google.maps.event.addDomListener(window, "load", initAutoComplete)
})



let autocomplete;

function initAutoComplete(){
   autocomplete = new google.maps.places.Autocomplete(
       document.getElementById('autocomplete'),
       {
           types: ['country', 'locality'],
       })
}

travel.html

{% extends 'base.html' %}
{% load static %} 

<input id='autocomplete' placeholder='enter a place' type="text">

{% endblock content %}
    
    
{% block js %}
    
        
<script type="text/javascript">
    
   var google_api_key = "{{google_api_key|safe}}";
    
</script>
        
    
    
{% endblock js %}

google_api_key 变量也被传递到 travel.html 中，我已经检查过了，它工作正常。

Answer 1

尝试 Django 文档中描述的 json_script 标签 https://docs.djangoproject.com/en/4.0/ref/templates/builtins/

在您的模板中：

{{ google_api_key|json_script:"google_api_key" }}

然后在js之前要用google_api_key:

const google_api_key = JSON.parse(document.getElementById("google_api_key").textContent);

Answer 2

我发现了我遇到的问题，我需要将文档就绪功能放在我的自定义 js 文件中，所以最后我使用了 json_script 方法，这就是我现在拥有的：

travel.html（插入模板端块内容上方的 html 部分）

{{ google_api_key|json_script:"google_api_key" }}

google_places.js

$( document ).ready(function() {
    // const google_api_key = document.getElementById('google_api_key');
    const google_api_key = JSON.parse(document.getElementById("google_api_key").textContent);
    $.getScript("https://maps.googleapis.com/maps/api/js?key=" + google_api_key + "&libraries=places")
    .done(function( script, textStatus ) {
        google.maps.event.addDomListener(window, "load", initAutoComplete)
    })


    let autocomplete;

    function initAutoComplete(){
    autocomplete = new google.maps.places.Autocomplete(
        document.getElementById('autocomplete'),
        {
            types: ['country', 'locality'],
        })
    }

});

Django 模板 JS 变量 'safe' 方法不将数据传递到自定义 js 文件？

Django template JS variable 'safe' method not passing data to custom js file?

javascript

django