如何使用jQuery发出Django Ajax请求？

Question

我是Ajax的新手，并且想使用jQuery在Django中向视图函数发出Ajax请求，但是我遇到了麻烦。

我从一个简单的示例开始，以检查它是否有效

var button = $('.any_button');
    $(button).click(function() {
        var button_value = $(this).val();
        $.ajax({
            type: "POST",
            url: "/url-path/to-my/view-function/",
            dataType: "json",
            data: { "button_value": button_value },
            beforeSend: function () {
                alert("Before Send")
            },
            success: function () {
                alert("Success");
            },
            error: function () {
                alert("Error")

            }
        });

    });

我已经从https://docs.djangoproject.com/en/1.11/ref/csrf/插入

function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');

    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });

我的查看功能：

from django.http import JsonResponse

def button_check(request):
    data = {"message": "Message"}
    return JsonResponse(data)

我的url路径引用了views.button_check

我收到了beforeSend alert和error alert ，但是我希望success alert

我错过了什么？ 不幸的是我无法继续前进。

Answer 1

在jQuery中尝试这样，

$.ajax({
    type: "POST",
    url: "/button_check/",
    method: "POST",
    data: { "button_value": button_value },
    contentType: "application/json",
    beforeSend: function () {
        alert("Before Send")
    },
    success: function () {
        alert("Success");
    },
    error: function () {
        alert("Error")

    }
}); 

网址应该是

url(r'button_check/', 'views.button_check'),

如果您的请求是“ POST”或特定的尝试，

def button_check(request):
    if request.method == "POST":
        data = {"message": "Message"}
        return JsonResponse(data)

Answer 2

您传递给jQuery.ajax的值将覆盖您的ajax设置 ：

  $.ajaxSetup({
    beforeSend: function(xhr, settings) {
      //this will never happen because it is overridden later
      alert("you will never see this.");
    }
  });
  $.ajax({
    type: "GET",
    url: "/index.html",
    beforeSend: function () {
      console.log("another before send");
    },
  })
  .then(x => console.log("success:",x))
  .then(undefined,reject => console.error(reject));

这意味着您将不会进行身份验证并丢失csrf令牌。

如您在评论中所述； 删除$ .ajax中的boforesend