使用 vanilla JS 向 Django 视图发送 AJAX 请求

Question

我正在尝试使用 vanilla JS 向 Django 视图发送GET AJAX 请求。 is_ajax() 通过但我无法正确检索请求对象。

这是我的 JS 代码。有/没有JSON.stringify(data) 不起作用。

document.querySelector('#testForm').onsubmit = () => {
      let data = {category : 'music'};

      const request = new XMLHttpRequest();
      request.open('GET', 'test/', true);
      request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

      request.onload = () => {
        const data = JSON.parse(request.responseText);
        console.log(data);
      }

      request.send(data);
      return false;
});

这是我的 Django 视图：

def test(request):
    if request.is_ajax():
        print('Yes!')
        data = {'category': request.GET.get('category', None)}
        return JsonResponse(data)
    else:
        raise Http404

它将Yes! 打印到终端，但我在控制台中返回{category: null}。

此 JQuery 代码有效，我得到了预期的 {category: "music"} 响应：

$.ajax({
        url: 'cart/',
        type: 'GET',
        data: data,
        dataType: 'json',
        success: function (data) {
          console.log(data);
        }
      });

我想知道我在 vanilla JS 代码或我的 Django 视图中缺少什么。

Answer 1

GET 请求不能有正文，因此request.send 的data 参数被忽略。您应该将其作为 URL 本身的一部分：

request.open('GET', 'test/?category=music', true);