求助：Django未处理JavaScript文件中的模板变量问题

Django的模板渲染仅作用于视图通过render方法返回的HTML模板文件，而通过{% static %}引入的独立JS文件属于静态资源，会直接由静态文件服务返回给浏览器，不会经过Django模板引擎处理，因此你JS代码里的{{ test_val }}不会被替换成视图中传递的实际值。

以下是三种实用的解决方法：

方法1：将JS代码直接嵌入HTML模板 #

把原本独立的JS代码放到HTML模板的<script>标签内，让模板引擎直接处理其中的变量：

<!DOCTYPE html>
<html lang="en">
  <body>
    Test template<br>
    {% csrf_token %} 
    {% load static %}     
    {{ form | safe }}
    <script type="text/javascript">
      alert("test script start")
      var x = "{{ test_val }}"
      alert(x)
    </script>
    Test template end<br>
  </body>
</html>

方法2：在HTML中定义全局变量，JS文件引用该变量 #

先在HTML模板里把模板变量赋值给全局window对象的属性，再让JS文件直接调用这个全局变量：

1. 修改HTML模板，添加全局变量定义：

<!DOCTYPE html>
<html lang="en">
  <body>
    Test template<br>
    {% csrf_token %} 
    {% load static %}     
    {{ form | safe }}
    <!-- 定义全局变量 -->
    <script type="text/javascript">
      window.testVal = "{{ test_val }}";
    </script>
    <script type="text/javascript" src="{% static '/grid_1/test_script.js' %}"></script>
    Test template end<br>
  </body>
</html>

2. 修改JS文件：

alert("test script start")
var x = window.testVal;
alert(x)

方法3：通过AJAX动态获取值（适合复杂/敏感数据场景） #

如果变量需要动态加载或涉及敏感数据（不宜直接暴露在HTML中），可以新增视图返回该值，再用AJAX请求获取：

1. 添加视图函数：

def get_test_val(req: djhp.HttpRequest):
    test_val = "This is a test"
    return djsc.JsonResponse({"test_val": test_val})

2. 在urls.py中添加对应路由：

path('get-test-val/', views.get_test_val, name='get_test_val'),

3. 修改JS文件：

alert("test script start")
fetch("/get-test-val/")
  .then(response => response.json())
  .then(data => {
    var x = data.test_val;
    alert(x);
  });

内容的提问来源于stack exchange，提问作者WV_Mapper