Django {% url %}标签传入JS动态参数报错：Could not parse the remainder ','

报错原因 #

Django模板标签{% url %}是服务端渲染阶段执行的语法，你代码里的${source.twitter_id}是客户端JavaScript运行时才会解析的变量，服务端渲染模板时无法识别这个JS变量，就会把它判定为无效的Django模板语法，抛出解析错误。

解决方案 #

方法1：占位符替换（推荐，适配Django路由规则） #

首先在你的HTML模板的<script>标签中，提前声明删除接口的URL占位符（要放在appendToUsrTable函数定义之前）：

{# Django模板端先渲染出带占位ID的基础路径 #}
const DELETE_SOURCE_URL = "{% url 'twitter:source_delete' 0 %}".replace('0', '__TWITTER_ID__');

然后修改你的JS逻辑，运行时用真实的source.twitter_id替换占位符：

function appendToUsrTable(source) {
    console.log(source.twitter_id)
    // 替换占位符为真实ID
    const realDeleteUrl = DELETE_SOURCE_URL.replace('__TWITTER_ID__', source.twitter_id);
    $("#sourceTable > tbody:last-child").append(`
         <tr class="record" id="source-${source.twitter_id}">
          <td>{{forloop.counter}}</td>
          <td>${source.source_acct}</td>
          <td>
            <p data-placement="top" data-toggle="tooltip" title="Delete">
              <a href="${realDeleteUrl}" class="source_delete btn btn-danger btn-xs" 
                 data-title="Delete" data-toggle="modal" data-target="#delete">
                 <span class="las la-trash-alt del_s"></span>
              </a>
            </p>
          </td>
       </tr>
`);
}

该方案的原理是：Django渲染模板时会把{% url 'twitter:source_delete' 0 %}自动解析成匹配你路由规则的真实路径（类似/twitter/source/delete/0/），你只需先把固定位置的0换成占位标识，JS运行时再替换为真实ID即可，不需要手动硬编码路径。

方法2：手动拼接路径（简易但不推荐） #

如果你确认路由规则不会频繁变更，也可以直接在JS中拼接路径：

const realDeleteUrl = `/twitter/source/delete/${source.twitter_id}/`

直接把拼接好的路径填入href属性即可。

额外提醒 #

你代码中的{{forloop.counter}}也是Django服务端渲染的模板变量，只会在页面首次加载时生成固定数值，动态追加的行无法自动递增计数，建议你额外维护一个全局计数变量，每次追加行时自增更新。

内容的提问来源于stack exchange，提问作者Vee Jay Tan