在 AJAX 调用中使用 Django URL 标记

Question

有很多帖子和页面讨论 Django 和 AJAX 的使用，我在过去一天左右阅读了数百篇文章来寻找这个问题的答案。快速概览：

可能的示例显示了这样的硬编码 URL：

 $.post("/projects/create/", {"name" : name}, function(data) {...

或者一些使用 URL 模板标记，但没有参数：

 $.post("{% url create_project %}", {"name" : name}, function(data) {...

但是，我想在 URL 中包含一个 Django 样式的参数。这是我的网址定义：

 url(r'ajax/entity_name/(?P<pk>\w+)/$',EntityAjaxView.as_view(),name='entity_name'),

是的，我使用的是基于类的视图，它基于 DetailView。默认情况下，此视图会查找要在 URL 中提供的 pk 值，在我会使用的普通模板中：

 {% url entity_name id_number %}

提供一个链接。在我的代码中，我想获取在 pk 值的输入框中输入的值。这是我的 JavaScript 代码片段（不起作用）：

 var id_number = $('#id_endowmententity_set-' + rownum + '-id_number').val()
$.ajax({
    type: "GET",
url: '{% url entity_name id_number %}',

所以，我的问题是，我可以将 URL 模板标记与输入框中的值一起使用吗？

（我知道我可以使用 POST 而不是 GET 并在 POST 数据中传递 id_number，但这在 DetailView 中效果不佳。）

原文由 Dashdrum 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Django 是一个服务器端应用程序。 Javascript 是客户端。 Django 模板在服务器上呈现，因此 {% url entity_name id_number %} 在服务器端进行评估，然后将其值返回给客户端。正因为如此，你不可能将 Django 模板与 javascript 结合起来。但是，您可以做几件事来解决您的问题。

由于您正在进行 ajax 调用，并且 ajax 调用取决于某些用户输入，通常客户端将任何类型的用户输入发送到服务器的最佳途径是使用查询字符串（ ? 在 URL 中）或发送 POST 数据。因此，最简单的方法是更改您的网址，不要在网址中包含 pk ，但要将其作为 GET 或 POST 的一部分数据。

 url(r'ajax/entity_name/$', EntityAjaxView.as_view(), name='entity_name'),

和视图（抱歉，我不熟悉基于类的视图）：

 def entity_name(request):
    pk = request.GET.get('pk')
    ...

在我看来，这是最优雅的解决方案。但是，如果您绝对需要在客户端构建 url，则可以在服务器端生成一个模板 url，然后在客户端替换您需要的任何部分以获得完整的 url。然而，这需要更多的维护，因此更容易出错。这种方法的简单 js 示例：

 var id_number = $('#id_endowmententity_set-' + rownum + '-id_number').val(),
    url = '{% url entity_name 0 %}'.replace('0', id_number);
$.ajax({
    type: "GET",
    url: url,
    ...
});

原文由 miki725 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

可以使用属性在您选择的元素上设置 Ajax url，它的行为类似于 Django url。重要的是，您甚至可以访问 Javascript 文件中的 url。我经常使用 HTML

 <div class="card-body" id="js-products" data-url="{% url 'chart-data' %}">
    <div class="chart-area">
      <canvas id="testChart"></canvas>
    </div>
  </div>

注意：在父 div JAVASCRIPT 上设置的 data-url 属性

$(document).ready(function () {

var endpoint = $("#js-products").attr("data-url");
var defaultData = [];
var labels = []
$.ajax({
    method: 'GET',
    url: endpoint,
    success: function (data) {
        labels = data.labels
        defaultData = data.data_default
        setChart()

    },
    error: function (error_data) {
        console.log(error_data)
    }
})

function setChart() {
    var ctx = document.getElementById('testChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        responsive: true,
        data: {
            labels: labels,
            datasets: [{
                label: 'Monthly Performance',
                data: defaultData,

            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
 }
});

DJANGO VIEWS 我正在使用 django rest 框架类视图，但您可以使用基于函数或类的视图类 ChartData(APIView)：

 authentication_classes = []
permission_classes = []

def get(self, request, format=None):
    labels = ['Products', 'User', 'May']
    data_default = [SeedProduct.objects.all().count(),
                    User.objects.all().count(), 4]
    data = {
        'labels': labels,
        'data_default': data_default,
    }

    return Response(data)

DJANGO URLS：从视图中导入视图类

path('api/chart/data', views.ChartData.as_view(), name="chart-data"),

原文由 Fabrice Hafashimana 发布，翻译遵循 CC BY-SA 4.0 许可协议