所以對于我們這些使用 Python 和 Django 框架開發(fā)網(wǎng)站的人來說，有一個叫做 jinja 的很棒的工具，它可以用作模板引擎。例如：

而不是像這樣對導入進行硬編碼：

<script src="assets/js/onebutton.js"></script>

我們可以完成這個：

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

在這種情況下，它會自動搜索名為 static 的文件夾并進入內(nèi)部查找所需的代碼。

但是為什么不能在 Javascript 中使用 jinja 模板。

例如：

主頁.html

<script src='whatever.js'></script>

<p>Another example</p>

<button id="clickme"> click me </button>

無論如何.js

$(function()

{

$('#clickme').click(function(){

$.ajax({

                    headers : {'X-CSRFToken': getCookie('csrftoken')},

                    type: "POST",

                    url: '{% url "func" %}', //<--Problem arise here

                    datatype:"json",

                    data: {},

                    success: function(data){

                        var new_template = '<h1> %firstmsg% </h1>';

                        var new_frontend = new_template.replace('%firstmsg%',data.message);

                        console.log(new_frontend);

                        document.getElementById('wor').innerHTML+=new_frontend;

                    }

                });

}

}

Django 會將 AJAX 請求中的 url 識別/'{% url "func" %}'為/func

解決這個問題的唯一方法是將整個代碼從移動whatever.js到homepage.html在一個<script></script>塊中。

也許我們需要導入一些東西才能讓 Jinja 模板工作？

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

在這種情況下，它會自動搜索名為 static 的文件夾并進入內(nèi)部查找所需的代碼。

這是不準確的。它所做的只是將給定的路徑轉(zhuǎn)換為您的設(shè)置文件中提供的靜態(tài)路徑，如下所示 - /static/asssets/js/onebutton.js. 這就對了。Django 或 Jinja2 不會通過文件夾查找文件。它甚至不在乎文件是否存在。

稍后，瀏覽器在收到 html 文檔時會自動從服務器獲取此文件。

回到關(guān)于為什么不能在 JS 文件中使用 Jinja2 或 Django 模板語法的原始問題。嗯，你可以。但是您必須從您的視圖中呈現(xiàn)您的 JS 文件。

現(xiàn)在，我確定您正在使用該render函數(shù)從視圖中返回模板。但是它有什么作用呢？

該render函數(shù)將 django 特定模板標簽轉(zhuǎn)換為適當?shù)?html 內(nèi)容。

因此，如果您在 js 文件中使用 django 或 jinja 的模板語法，則也必須渲染 js 文件。但這似乎是個壞主意。相反，您可以在 html 文件中創(chuàng)建一些全局變量，并在 js 文件中使用它們。

<!-- define required variables in template -->

<script>

    var URL = '{% url ... %}';

    var OTHER_VARIABLE = '{{ other_variable }}';

</script>

<!-- include your js files -->

<script src="/path/to/file.js"></script>