JavaScript跳转Django视图传递动态参数报错问题排查

Django的{% url %}模板标签在服务端渲染页面时就会执行完成，页面返回给浏览器时，这个标签已经被替换成固定字符串，根本无法读取后续JavaScript运行阶段才定义的ids、messages变量，直接在模板标签内传入JS变量必然触发错误。

根据你的路由传参习惯选对应方案即可：

方案1：沿用路径参数传参 #

如果你的Django路由已经定义了路径参数占位，示例路由如下：

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    # 路由中定义了两个位置参数，对应ids和messages
    path('message/<int:ids>/<str:messages>/', views.message_page, name='message-page'),
]

修改JS代码如下，通过占位符替换的方式拼接实际参数：

$(function () {
    console.log("HOME");
    let ids = 1;
    let messages = "My personal Message";
    // 服务端渲染时先生成带临时占位符的基础路由
    let baseUrl = "{% url 'message-page' 0 'TEMP_MSG_PLACEHOLDER' %}";
    // 替换占位符为实际变量值，字符串参数必须做URL编码避免格式错误
    let myurl = baseUrl
        .replace('/0/', `/${ids}/`)
        .replace('TEMP_MSG_PLACEHOLDER', encodeURIComponent(messages));

    window.location.href = myurl;
});

注意：路径参数不适合传递包含/、?等URL特殊保留字符的内容，即使编码也可能触发Django路由404错误，这类场景优先用下面的查询参数方案。

方案2：查询参数传参（推荐） #

不需要在路由路径里定义参数位，通过URL问号后面的查询串传值，兼容性更好，也不会有特殊字符导致的路由匹配问题。
首先调整路由定义，去掉路径里的参数占位：

# urls.py
urlpatterns = [
    path('message/', views.message_page, name='message-page'),
]

视图中直接从GET请求对象里读取参数：

# views.py
def message_page(request):
    ids = request.GET.get('ids')
    messages = request.GET.get('messages')
    # 补充你的业务处理逻辑
    return render(request, 'message_page.html', context={'ids': ids, 'messages': messages})

对应JS代码修改为：

$(function () {
    console.log("HOME");
    let ids = 1;
    let messages = "My personal Message";
    // 服务端渲染出固定的基础路由
    const baseUrl = "{% url 'message-page' %}";
    // 自动拼接编码后的查询参数
    const searchParams = new URLSearchParams({ids, messages});
    const myurl = `${baseUrl}?${searchParams.toString()}`;

    window.location.href = myurl;
});

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