如何将带有参数的 django url 发送到 ajax 请求？

Question

目前，我将 url 发送到 ajax 为：

    $('.togglebtn').on("click",function(){
         console.log("Hello")
         $.ajax({
            type: 'GET',
            url: "http://localhost:8000/toggle/2945016571198",
            contentType: 'application/json',
            success: function (data) {
                  appendData(data);
                   function appendData(data) {
            var mainContainer = document.getElementById("switch_{{forloop.counter}}");
            for (var i = 0; i < data.length; i++) {
                var div = document.createElement("div");
                div.innerHTML = '<tr>' + data[i].line_items + ' ' + data[i].nomenclature+'</tr>' ;
                mainContainer.appendChild(div);
            }
        }
            }
  });

目前，我正在将请求发送到静态 url。我们可以使用 {% url toggle i.id %} 在 ajax 请求中动态设置 url 吗？这个ajax函数是否重复？

Answer 1

不是那种方式或方式，{% url toggle i.id %} 用于 Django 模板，因此在渲染页面 服务器 端时执行。你要做的是客户端。

您也在尝试使用"switch_{{forloop.counter}}"，除非您有多个 'click' 功能的 sn-ps，否则它将无法工作。我建议不要这样做，因为它根本没有意义。您定义一次函数，然后使用它。见第一个例子。

我能想到的最好的事情是在您的模板中公开一个“基本网址”并在 javascript 中使用它。 例如在您的 Django 模板中：

<script>
// Put the Django variable into javascript context.
toggle_base_url = {{ toggle_base_url_from_django_view_context }};
// Use it in your ajax url by combining strings.
 $('.togglebtn').on("click",function(){
         console.log("Hello")
         var obj = $(this); // Save the clicked button for reference.
         var objectId = obj.attr('id');
         var buttonId = obj.attr('data-button-id');
         $.ajax({
            type: 'GET',
            url: toggle_base_url + "/" + buttonId
            contentType: 'application/json',
            success: function (data) {
                // Cannot use 'this' in this context (IIRC), use the obj var we assigned.
                // Replace with something to find your parent container
                // Could use have a attribute on your button that points to the container.
                // Probably the number you use in the url?
                var mainContainer = obj.parent('containerclass');
                for (var i = 0; i < data.length; i++) {
                    var div = document.createElement("div");
                    div.innerHTML = '<tr>' + data[i].line_items + ' ' + data[i].nomenclature+'</tr>' ;
                    mainContainer.appendChild(div);
                }
            }
        }
  });

</script>

在您的 Django 视图中，您可以执行以下操作：

# Make a base url to reuse, remove the last part.
# So turn `/toggle/1` into `/toggle`
base_url = reverse('toggle', args=[1]).rsplit('/', 1)
context = {
    'toggle_base_url_from_django_view_context': base_url,
}
return render(request, 'yourtemplate.html', context=context)