[英]How to configure a django url correctly in javascript
I have seen lots of questions and answers on this topic (eg this one ), but the solution seems to evade me.我已经看到很多关于这个主题的问题和答案(例如这个),但解决方案似乎让我望而却步。 In my template I have a series of radio buttons and wish to pass the selected item back to the view
在我的模板中,我有一系列单选按钮并希望将所选项目传递回视图
common/urls.py通用/urls.py
path('use-selected/<str:app_base>/<str:board_number>/', views.UseSelectedItem.as_view(), name='use-selected'),
If I enter the the following code in my template, it works correctly如果我在我的模板中输入以下代码,它可以正常工作
<a id="use-selected" href="{% url 'use-selected' app_base='solo' board_number='4' %}"><button type="submit">Use selected</button></a>
if, on the other hand, I assign the href in javascript另一方面,如果我将 href 分配给 javascript
html html
<a id="use-selected" href=""><button type="submit">Use selected</button></a>
javascript javascript
$(document).ready(function () {
selectedBoard = document.getElementsByName('selected_board_id');
use_selected_href = document.getElementById('use-selected-href');
selectedBoard.forEach((radioButton) => {
radioButton.addEventListener('click', () => {
processBoardSelection(radioButton.value)
});
})
});
function processBoardSelection(board_number) {
var use_selected_text = "{% url 'use-selected' app_base='app_base_value' board_number='board_number_value' %}"
temp_text = use_selected_text.replace('board_number_value', board_number.toString());
use_selected_href.href = href_text;
// use_selected_href.href="{% url 'use-selected' app_base='solo' board_number='4' %}"
}
the link fails.链接失败。 The request url is
请求 url 是
http://127.0.0.1:8000/common/history/solo/%7B%25%20url%20'use-selected'%20app_base%3D'solo'%20board_number%3D'4'%20%25%7D
I do not understand where the common/history/solo elements arise.我不明白常见/历史/独奏元素出现在哪里。 common and solo are apps within my project;
common和solo是我项目中的应用程序; common/history was the url to get to this page
common/history是 url 才能到达此页面
[EDIT 20210808 08:51 UCT] I have built a simple test app based on this problem and it works correctly. [编辑 20210808 08:51 UCT] 我已经基于这个问题构建了一个简单的测试应用程序并且它工作正常。 It uses the javascript and the a tag in the template as presented here (the java script being in s separate file).
它使用 javascript 和模板中的a标签,如此处所示(java 脚本位于单独的文件中)。 The url is interpreted correctly and the parameters are passed to the view.
url 被正确解释并且参数被传递给视图。
I repeat:我重复:
I do not understand where the common/history/solo elements arise.我不明白常见/历史/独奏元素出现在哪里。
in the url that fails在失败的 url
In your template you can try something like this:在您的模板中,您可以尝试这样的事情:
<input type="hidden" id="use-selected" value="{% url 'use-selected' app_base='solo' board_number='4' %}">
In js code refactor your functions like this:在 js 代码中重构你的函数,如下所示:
$(document).ready(function () {
// ...
selectedBoard.forEach((radioButton) => {
radioButton.addEventListener('click', () => {
href = $("#use-selected").prop("value")
processBoardSelection(radioButton.value, href)
});
})
});
function processBoardSelection(board_number, href) {
// ...
}
There is many methods to get the url.有很多方法可以获取 url。
The problem is, as @Robin Zigmond suggested in a comment, that the url creation code works if it is in the template, but not in a separate file.问题是,正如@Robin Zigmond 在评论中所建议的那样,url 创建代码如果在模板中但不在单独的文件中则有效。 I do not know why because I have used the method of separate files in other applications.
我不知道为什么,因为我在其他应用程序中使用了单独文件的方法。
So the template now includes:所以模板现在包括:
<a id="use-selected" href=""><button type="submit">Use selected</button></a>
...
<script>
function processBoardSelection(board_number) {
var use_selected_text = "{% url 'use-selected' app_base='app_base_value' board_number='board_number_value' %}"
var use_selected_href = document.getElementById('use-selected');
temp_text = use_selected_text.replace('board_number_value', board_number.toString());
href_text = temp_text.replace('app_base_value', app_base.toString());
use_selected_href.href = href_text;
}
</script>
The rest of the code remains in a separate js file rest的代码保留在单独的js文件中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.