如何将JavaScript变量传递给Django模板标签与过滤器？

Django模板标签（如{% with %}）和过滤器（如|upper）是服务器端渲染阶段执行的，在页面发送到浏览器前就已经处理完毕并生成静态HTML/JS代码。而JavaScript变量是客户端浏览器运行时才存在的，此时模板渲染已经完成，服务器根本无法感知到客户端的JS变量，所以直接尝试将JS变量传入模板标签/过滤器会没有输出。

情况1：JS变量的值可从服务器端获取 #

如果js_val的初始值是从后端视图传递过来的，直接在服务器端处理后注入JS即可：

后端视图（views.py） #

def index(request):
    # 从后端传递变量到模板
    context = {"server_text": "Hello"}
    return render(request, "index.html", context)

前端模板（index.html） #

<script>
// 直接将服务器端模板变量赋值给JS变量
let js_val = "{{ server_text }}";

// 使用模板标签和过滤器处理服务器端变量
{% with dj_val=server_text %}
    console.log("{{ dj_val }}"); // 输出 Hello
{% endwith %}

console.log("{{ server_text|upper }}"); // 输出 HELLO
</script>

情况2：JS变量是客户端动态生成的 #

如果js_val是客户端动态生成的（比如用户输入、前端计算结果），无法直接用Django模板过滤器处理，有两种方案：

方案A：用JavaScript实现类似过滤器的功能 #

直接用JS的原生方法替代Django过滤器的逻辑：

<script>
let js_val = "Hello"; // 客户端动态生成的变量

console.log(js_val); // 输出 Hello
// 用JS的toUpperCase()实现upper过滤器的效果
console.log(js_val.toUpperCase()); // 输出 HELLO
</script>

方案B：通过AJAX请求后端处理 #

如果必须使用Django的模板/过滤器逻辑，需要将JS变量传给后端处理后返回结果：

后端视图（views.py）

from django.http import JsonResponse

def process_text(request):
    if request.method == "POST":
        input_text = request.POST.get("text", "")
        # 用Python实现upper逻辑（或调用Django过滤器）
        processed_text = input_text.upper()
        return JsonResponse({"result": processed_text})

前端模板（index.html）

<script>
let js_val = "Hello"; // 客户端动态生成的变量

// 发送AJAX请求到后端处理
fetch("/process-text/", {
    method: "POST",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-CSRFToken": "{{ csrf_token }}" // Django必须的CSRF令牌
    },
    body: `text=${encodeURIComponent(js_val)}`
})
.then(response => response.json())
.then(data => {
    console.log(js_val); // 输出 Hello
    console.log(data.result); // 输出 HELLO
});
</script>

内容的提问来源于stack exchange，提问作者Super Kai - Kazuya Ito