在javascript点击事件中调用django-urls

Call django urls inside javascript on click event

本文关键字：调用 django-urls 事件 javascript      更新时间：2023-09-26

我在一个模板中得到了一个javascript onclick事件，我想用它的id参数调用我的一个Django url，如下所示：

$(document).on('click', '.alink', function () {
        var id = $(this).attr('id');
        document.location.href ="{% url 'myapp:productdetailorder' id %}"
});

当然，这根本不起作用。知道吗？

提前感谢！！

我认为最好的方法是用模板中呈现的URL创建一个html data-*属性，然后使用javascript来检索它。

这样可以避免将js/django模板混合在一起。此外，我将所有JS都保存在视图外的一个单独文件中（这通常是一种更好的做法），因此尝试混合这两种方法是行不通的。

例如，如果你有一个想要的url，只需创建一个html隐藏元素：

<input type="hidden" id="Url" data-url="{% url 'myapp:productdetail' id %}" />

然后，在您的JS:中

$(document).on('click', '.alink', function () {
    var url = $("#Url").attr("data-url");
});

我经常在下拉列表中使用这种模式，这样我在第一次呈现页面时就不必提供所有选项（这通常会加快速度）。

您正试图访问javascript变量，该变量是在后台Django模板中的用户点击前端时创建的。但是，你已经知道这是行不通的。

更好的选择是在javascript:中重建url

$(document).on('click', '.alink', function () {
    // Generate URL without "id" bit
    var url = "{% url 'myapp:productdetail' %}";
    var id = $(this).attr('id');
    // Construct the full URL with "id"
    document.location.href = url + "/" + id;
});

如果你没有一个django-url助手来返回你需要的url，你可以打印出任何一个，然后简单地用javascript替换它，比如：

$(document).on('click', '.alink', function () {
    var url = "{% url 'myapp:productdetail' 123 %}";
    var id = $(this).attr('id');
    // Construct the full URL with "id"
    document.location.href = url.replace('123', id);
});

问题似乎在于您在js静态文件中使用django模板语言（我说得对吗？）尝试将该变量移动到html模板文件，例如：

<script type=text/javascript>
var a = "{% url'myapp:productdetail' id %}" </script>

在静态js文件中：

document.location.href = a;

您可以使用javascript代码"window.location.oorigin"，这将给出基本url，之后您可以添加"/路径名"；

您不需要传递任何这些。。。

写。

 location.href = "/" + id

仅此而已。

相关文章：