时间戳

首页 > 解决方案 > 如何在 javascript 中正确配置 django url

javascript - 如何在 javascript 中正确配置 django url

问题描述

我已经看到了很多关于这个主题的问题和答案（例如这个），但解决方案似乎回避了我。在我的模板中，我有一系列单选按钮，并希望将所选项目传递回视图

常见/urls.py

path('use-selected/<str:app_base>/<str:board_number>/', views.UseSelectedItem.as_view(), name='use-selected'),

如果我在模板中输入以下代码，它可以正常工作

<a id="use-selected" href="{% url 'use-selected' app_base='solo' board_number='4' %}"><button type="submit">Use selected</button></a>

另一方面，如果我在 javascript 中分配 href

html

<a id="use-selected" href=""><button type="submit">Use selected</button></a>

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' %}"
}

链接失败。请求网址是

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

我不明白共同/历史/独奏元素出现在哪里。common和solo是我项目中的应用程序；common/history是访问此页面的 url

[EDIT 20210808 08:51 UCT] 我已经基于这个问题构建了一个简单的测试应用程序，它可以正常工作。它使用此处介绍的模板中的 javascript 和a标记（java 脚本位于单独的文件中）。正确解释 url 并将参数传递给视图。

我重复 ：

我不明白共同/历史/独奏元素出现在哪里。

在失败的网址中

标签： javascriptdjango

解决方案

在您的模板中，您可以尝试以下操作：

<input type="hidden" id="use-selected" value="{% url 'use-selected' app_base='solo' board_number='4' %}">

在 js 代码中重构你的函数，如下所示：

$(document).ready(function () {
    // ...
    selectedBoard.forEach((radioButton) => {
        radioButton.addEventListener('click', () => {
            href = $("#use-selected").prop("value")
            processBoardSelection(radioButton.value, href)
        });
    })
});


function processBoardSelection(board_number, href) {
    // ...
}

获取url的方法有很多。

推荐阅读