将查询集从Django views发送到JQuery

Question

我想从Django views向JQuery发送一个查询集的JsonResponse，但是我没有从JQuery端得到任何数据。

这是我的视图文件add_field_views.py：

从django.http导入JsonResponse

def drop_down_requests(request):
    text = request.POST['text']
    print("---->", text)
    from captiq.financing_settings.models import ChoiceGroup
    response = ChoiceGroup.objects.get(slug="Ja/Nein")
    output = JsonResponse(response,safe=False)
    print("output -", output)
    return output

我在这里声明了urls.py中的URL，以便Jquery从视图中获取数据：

urlpatterns = [
   
    path('my-ajax-test/', add_field_views.drop_down_requests, name='ajax-test-view'),
]

项目urls.py

frontend_urls = []
for module_name, module_data in FRONTEND_MODULES.items():
    frontend_urls.append(re_path(
        module_data['url'],
        XFrameSameOriginView.as_view(template_name=module_data['view']),
        name=module_name))

urlpatterns = i18n_patterns(
    path('admin/', admin_site.urls),
    path('admin/log_viewer/', include(
        ('log_viewer.urls', 'log-viewer'), namespace='log-viewer')),
    path('admin/docs/', include('docs.urls')),
    path('_nested_admin/', include('nested_admin.urls')),
    path('accounts/', include(
        ('accounts.urls', 'accounts'), namespace='accounts')),
    path('api-auth/',
         include('rest_framework.urls', namespace='rest_framework')),

)

api_v1_patterns = [
    path('financing/', include(
        ('financing.urls', 'financing'), namespace='financing')),
    path('financing-settings/', include(
        ('financing_settings.urls', 'financing_settings'),
        namespace='financing_settings')),
    path('partners/', include(
        ('partners.urls', 'partners'), namespace='partners')),
    path('accounts/', include(
        ('accounts.urls', 'accounts'), namespace='accounts')),
    path('customers/', include(
        ('customers.urls', 'customers'), namespace='customers')),
]

urlpatterns += [
    path('api/v1/', include((api_v1_patterns, 'api'), namespace='api')),
    path('', RedirectView.as_view(url='loan-application/auth')),
    path('notifications/', include(
        'notifications.urls', namespace='notifications')),
] + frontend_urls

if settings.ENABLE_ROSETTA:
    urlpatterns += i18n_patterns(
        path('admin/rosetta/', include('rosetta.urls')),
    )

if settings.DEBUG:
    urlpatterns += static(
        settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

然后是我的JQuery，它正在等待查询集数据或JSON数据：

window.addEventListener('load', function () {
    (function ($) {
        "use strict";
        $(document).ready(function () {

            $("#id_depending_field").change(function (event) {
                console.log("am here man");
                const valueSelected = this.value;
                $.ajax({
                    type: "POST",
                    url: 'my-ajax-test/',
                    data: {
                        csrfmiddlewaretoken:
                        document.getElementsByName('csrfmiddlewaretoken')[0].value,
                        text: valueSelected
                    },
                    success: function callback(response) {
                        console.log("____________", response)
                    }
                });
            })

        });
    })(django.jQuery);
});

使用上面的代码，我无法获得JQuery格式的JSON数据，而是得到了下面奇怪的HTML输出：

<link rel="stylesheet" type="text/css" href="/static/css/notifications.css">

.

我在这里做错了什么？

Answer 1

当您使用相对路径时，很容易将您的urls引向错误的位置。在您的页面上，ajax将调用/en/admin/financing_settings/field/add/my-ajax-test/。

您可以使用data-*属性在html页面上保存精确的url。在您的示例中，向#id_depending_field (或任何其他元素)添加data-ajax_url属性

data-ajax_url="{% url "api:financing_settings:ajax-test-view" %}" - url必须是这样的，因为我理解您的路由

然后在ajax代码中使用url: $(#id_depending_field).data('ajax_url')而不是url: 'my-ajax-test/',

这将始终为您提供准确的url从任何页面，您加载您的.js文件。之后，如果您决定重构项目并更改url路径，它将为您保留所有更改，而不更改html或js代码

Answer 2

发送AJAX请求时使用绝对URL：

$.ajax({
  type: "POST",
  url: '/my-ajax-test/',
  data: {
  ...
})

显然，你把它寄给/en/admin/financing_settings/field/add/my-ajax-test/是因为它是相对的