在点击事件中调用javascript里面的django网址

Question

我在模板中有一个javascript onclick事件,我想从它调用一个带有id参数的django url,如下所示:

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

当然这根本不起作用.任何的想法 ？

提前致谢 !!

Answer 1

我认为最好的方法是data-*使用在模板中呈现的URL 创建一个html 属性,然后使用javascript来检索它.这样你就可以避免将js/django模板的东西混合在一起.另外,我将所有JS保存在视图之外的单独文件中(这通常是一种更好的练习),因此尝试混合这两者是行不通的.例如,如果你有一个你想要的网址,只需创建一个html隐藏元素:

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

那么,在你的JS中:

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

我经常将这种模式用于下拉列表,这样我在第一次渲染页面时就不必提供所有选项(这通常可以加快速度).

Answer 2

您正在尝试访问在用户单击后端Django模板中的前端时创建的javascript变量。但是，您已经知道它不起作用。

更好的选择是在javascript中重建网址：

$(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;
});

如果您没有可返回所需URL的django 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);
});

Answer 3

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

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

并在静态js文件中：

document.location.href = a;