如何在Django的{% url %}标签中使用JavaScript变量？

Django模板标签是服务器端渲染的，页面发送到浏览器前就已经处理完毕；而JavaScript变量是客户端浏览器运行时才生成的。你直接在{% url %}里用JS变量testing，服务器渲染阶段根本识别不到这个变量，自然无法生成正确的URL。

方法1：用占位符生成基础URL，再用JS替换 #

先在模板里生成一个带占位值的URL，之后用JS把占位值替换成目标变量：

<script type="text/javascript">
    const testing = 10;
    // 获取按钮元素
    const nextBtn = document.querySelector('.description__button');
    // 替换URL中的占位符（这里用0作为占位）
    nextBtn.href = nextBtn.href.replace(/0/, testing);
</script>

<a href="{% url 'battlefield:onevsone_trainer_selection' num_trainers=0 %}" class='description__button btn btn__large'>Next ></a>

方法2：直接用JS拼接URL路径 #

如果URL结构简单，也可以跳过模板标签，直接用JS拼接完整路径：

<script type="text/javascript">
    const testing = 10;
    const nextBtn = document.querySelector('.description__button');
    // 拼接对应urls.py里定义的路径
    nextBtn.href = `/one-vs-one/trainers/${testing}`;
</script>

<a href="#" class='description__button btn btn__large'>Next ></a>

适配动态选中div的场景 #

如果要根据用户点击的div更新数值，给目标div绑定点击事件即可：

<script type="text/javascript">
    let selectedNum = 10; // 默认选中值
    const nextBtn = document.querySelector('.description__button');
    
    // 给所有可选中的div绑定点击事件
    document.querySelectorAll('.selectable-div').forEach(div => {
        div.addEventListener('click', function() {
            // 从div的data属性中获取数值
            selectedNum = parseInt(this.dataset.num);
            // 更新按钮链接（这里用方法1的替换逻辑）
            nextBtn.href = `{% url 'battlefield:onevsone_trainer_selection' num_trainers=0 %}`.replace(/0/, selectedNum);
        });
    });
    
    // 初始化按钮链接
    nextBtn.href = `{% url 'battlefield:onevsone_trainer_selection' num_trainers=0 %}`.replace(/0/, selectedNum);
</script>

<!-- 示例可选中的div -->
<div class="selectable-div" data-num="5">选择5个训练师</div>
<div class="selectable-div" data-num="10">选择10个训练师</div>

<a href="#" class='description__button btn btn__large'>Next ></a>

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