如何在Django {% url %}标签内使用javascript变量?

Question

我试图动态更改一个按钮的链接，基于用户当前选择的div。

我试着在HTML脚本标签中运行一个JS变量的快速测试，但是Django没有像读取num那样读取变量。

<script type="text/javascript">
const testing = 10
</script>
<a href="{% url 'battlefield:onevsone_trainer_selection' num_trainers=testing %}"  class='description__button btn btn__large'>Next ></a>

URL如下:

path('one-vs-one/trainers/<int:num_trainers>', views.oneVsOne, name='onevsone_trainer_selection')

不确定为什么它不起作用。当我给它传递一个字符串'10'时，它工作

Answer 1

Django模板是由Django在服务器端处理的，这意味着当客户端浏览器接收到HTML的时候，url函数，也就是{% url 'battlefield:onevsone_trainer_selection' num_trainers=testing %}，已经被处理了。当然，Javascript是在浏览器中运行的，你不能在Javascript变量到达客户端后才把它传递给django函数。

如果你想改变这个客户端(不通过ajax或其他东西与服务器通信)，你可能需要直接改变href属性。你可以这样做:

<a id='changeableUrl' href="{% url 'battlefield:onevsone_trainer_selection' num_trainers=1 %}"  class='description__button btn btn__large'>Next ></a>
<script>
//figure out where the URL should be going
const testing = 10
//get the current URL
url = document.getElementById('changeableUrl').getAttribute("href")
///replace the end of the url href with our value
url.replace('/1/', '/'+testing+'/')
///write back to the link attribute
document.getElementById('changeableUrl').setAttribute("href", url)
</script>

Answer 2

你应该明白的是django模板引擎工作在服务器端，而Javascript只在客户端工作。实际情况是，你要求django渲染如下模板:

<script type="text/javascript">
const testing = 10
</script>
<a href="one-vs-one/trainers/testing" class='description__button btn btn__large'>Next ></a>

这里，test不是一个javascript变量，它只是一个普通的html内容。而且，在渲染的时候它不是一个整数，所以django内部使用的正则表达式不会被匹配，并且会引发渲染错误。

如果你真的想在客户端设置url参数，那么我看到两个解决方案:

第一种方法是手动构建url，而不使用django的url函数。:

<a href="" id="to-change" class='description__button btn btn__large'>Next ></a>
<script type="text/javascript">
document.getElementById("to-change").href = "one-vs-one/trainers/" + num_trainer;
</script>

第二个解决方案是SamSparx提出的。

无论您选择哪种解决方案，您都应该仔细记住，两者都不是完全安全的。在第一种情况下，如果有一天您更改了urls.py文件中的url，那么您需要做更多的工作，从而使代码的可维护性降低一些。在第二种情况下，您将暴露给预定义的url。如果JS没有启用，或者如果你的客户端浏览器发生了错误，这可能意味着你的链接将被链接到它不应该被链接的地方。