Django AJAX调用含slug参数接口时{% url %}模板标签无法解析报错如何解决

云上老周

2026-10-15

根本原因

Django的{% url %}等模板标签仅会在服务端渲染HTML模板的过程中被解析替换，你写在独立.js静态文件里的代码不会经过Django模板引擎处理，因此模板标签会被当成普通字符串拼接到请求地址中，最终触发404错误。
你之前尝试的拼接写法失效，是因为该路由需要传入item_type参数，直接写{% url 'boring:filter_items' %}缺少必填参数，Django在模板渲染阶段就会报错，无法生成正确的路由前缀。

可用解决方案

方案1：将相关JS逻辑写在Django模板内

把需要用到动态路由的JS代码放在HTML模板的<script>标签中，用占位符替换的方式生成最终请求地址：

<script>
function filterItemType(type) {
  $.ajax({
    type: "GET",
    data: $(this).serialize(),
    // 先生成带占位符的路由，再替换为真实的type值
    url: "{% url 'boring:filter_items' item_type='__TEMP_TYPE__' %}".replace("__TEMP_TYPE__", type),
    // 剩余的Ajax逻辑
  })
}
</script>

方案2：独立JS文件场景，在模板中声明全局路由变量

如果必须把逻辑写在独立的JS文件中，可以先在HTML模板内提前声明全局路由配置，JS文件直接调用即可：

在HTML模板的头部添加全局变量声明：

<script>
// 全局路由配置，所有需要在JS中使用的动态路由都可以在这里定义
window.siteRoutes = {
  filterItems: "{% url 'boring:filter_items' item_type='__PLACEHOLDER__' %}"
}
</script>

在独立JS文件中直接使用变量，替换占位符即可：

function filterItemType(type) {
  const targetUrl = window.siteRoutes.filterItems.replace("__PLACEHOLDER__", type)
  $.ajax({
    type: "GET",
    data: $(this).serialize(),
    url: targetUrl,
    // 剩余的Ajax逻辑
  })
}