Как использовать переменную javascript внутри тега Django {% url %}?

Я пытаюсь динамически изменить ссылку кнопки в зависимости от того, какой div выбран пользователем в данный момент.

Я попытался провести быстрый тест с JS-переменной в теге HTML script, но 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', он сработал

Шаблоны 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>

Вы должны понимать, что шаблонизатор 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>

Здесь testing - это не переменная javascript, а обычный html-контент. Более того, это не целое число во время рендеринга, поэтому regex, используемый 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.

Какое бы решение вы ни выбрали, следует помнить, что ни одно из двух решений не является полностью безопасным. В первом случае вы делаете код немного менее сопровождаемым, предоставляя больше работы, если однажды вы измените url в вашем файле urls.py. Во втором случае вы подвергаете себя воздействию предопределенного url. Если JS не включен или если что-то не так происходит в браузере вашего клиента, это может означать, что ваша ссылка будет связана с тем, с чем не должна.

Вернуться на верх