如何在 javascript 中正确配置 django url答案

【问题标题】：How to configure a django url correctly in javascript如何在 javascript 中正确配置 django url
【发布时间】：2023-03-26 03:43:01
【问题描述】：

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

common/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/history/solo 元素出现在哪里。 common 和 solo 是我项目中的应用程序； common/history 是访问此页面的 url

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

我再说一遍：

我不明白 common/history/solo 元素出现在哪里。

在失败的url中

【问题讨论】：

这是在单独的 Javascript 文件中吗？ Django 模板语言仅适用于您告诉 Django 呈现的 HTML 模板文件。看起来您已经将文字模板语言字符串作为您的 URL，因此浏览器对其进行 URL 编码并将其用作相对 URL（就像它被告知用作 URL 的任何随机字符串一样）。
脱离@RobinZigmond 所说的那样，您在Javascript 中能做的最好的事情就是使用模板文字（反引号键）用变量格式化您的URL。有关更多信息，请参阅本文：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
它是一个单独的js文件。那么如何在url中传递变量作为参数呢？我增强了我的问题

标签： javascript django

【解决方案1】：

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

<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的方法有很多。

【讨论】：

对不起。我错过了一些东西。我不明白。这似乎无济于事。隐藏元素有什么作用？

【解决方案2】：

问题是，正如@Robin Zigmond 在评论中所建议的那样，如果 URL 创建代码在模板中，而不是在单独的文件中，则它可以工作。我不知道为什么，因为我在其他应用程序中使用了单独文件的方法。

所以模板现在包括：

<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>

其余代码保留在单独的 js 文件中

【讨论】：