如何将Django的views.py变量传入myfirst.js函数中？

针对你的场景，下面是几种实用的实现方式：

方法一：模板渲染全局JS变量（最直接） #

1. 先修改views.py，把变量传入模板上下文：

def somefunction(request):
    var = True 
    return render(request, 'dashboard.html', {'var': var})

2. 在dashboard.html里，在引入myfirst.js之前添加脚本，把模板变量转成JS全局变量：

<script>
// 用lower过滤器把Django的布尔值转成JS识别的小写格式
window.myVar = {{ var|lower }};
</script>
<script src="{% static 'myfirst.js' %}"></script>

3. 现在myfirst.js的函数里就能直接用这个变量：

function myFunction() {
    console.log(myVar); // 输出 true
    // 后续逻辑可直接使用myVar
}

方法二：用HTML元素的data属性（更优雅，适合多变量场景） #

1. 同样先把变量传入模板上下文（和方法一的第一步一致）。
2. 在dashboard.html中添加一个用于存数据的元素：

<!-- 可以用隐藏元素，或者页面已有的元素 -->
<div id="app-data" data-var="{{ var|lower }}" style="display: none;"></div>
<script src="{% static 'myfirst.js' %}"></script>

3. 在myfirst.js中通过DOM获取这个值：

function myFunction() {
    // 从data属性取值，注意转成布尔类型
    const myVar = document.getElementById('app-data').dataset.var === 'true';
    console.log(myVar); // 输出 true
}

方法三：用Django的json_script标签（安全适配复杂数据） #

如果变量是字典、列表这类复杂数据，用这个方法更稳妥，不会有语法错误：

1. 视图传变量到模板（步骤同前）。
2. 在dashboard.html中使用json_script标签：

{% json_script var 'my-var-data' %}
<script src="{% static 'myfirst.js' %}"></script>

3. 在myfirst.js中解析数据：

function myFunction() {
    const varData = JSON.parse(document.getElementById('my-var-data').textContent);
    console.log(varData); // 输出 true
}

方法四：AJAX异步获取（适合动态刷新场景） #

如果需要在触发函数时才获取变量，用异步请求：

1. 在views.py中新增一个接口视图：

from django.http import JsonResponse

def get_var(request):
    var = True
    return JsonResponse({'var': var})

2. 在项目的urls.py中配置路由：

from django.urls import path
from . import views

urlpatterns = [
    # 原有的路由
    path('somefunction/', views.somefunction, name='somefunction'),
    # 新增的接口路由
    path('get-var/', views.get_var, name='get-var'),
]

3. 在myfirst.js中用fetch请求数据：

async function myFunction() {
    try {
        const response = await fetch('/get-var/');
        const data = await response.json();
        console.log(data.var); // 输出 true
    } catch (error) {
        console.error('获取数据失败:', error);
    }
}

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