Javascript 如何使用jQuery发出DjangoAjax请求？

我是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")

            }
        });

    });

我已经插入了

我的

url

路径指的是

视图。按钮\u检查

我在发送前收到

警报

和

错误警报

，但我希望收到

成功警报

---

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

在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应该是

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

如果您的请求是“发布”或特定尝试

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

传递给jQuery.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

您可以在浏览器中键入url吗？如果在网络选项卡中打开开发工具（Chrome中的F12），会出现什么错误？是的，如果在浏览器中打开url，会得到输出{“message”：“message”}。那么，开发工具网络中的xhr请求是否有错误？错误是什么？如果它在浏览器中工作，那么您可能应该更改POST以获取JavaScript代码，在浏览器中键入url会发出GET请求。好的，现在我插入了

If request.method==“POST”：

，如果我在浏览器中打开url，则会得到一个值错误，因为存在预期的GET请求。如果我单击触发Ajax请求的按钮，我会得到以下xhr的网络错误：

in违禁（403）CSRF验证失败。请求已取消。

给出的失败原因：CSRF令牌丢失或不正确。

如果我从Ajax请求中删除

beforeSend:function（）{alert（“beforesed”）}，

我会收到成功警报。我认为它已经覆盖了csrf令牌函数中的

beforeSend

，这是可行的，但前提是我删除了

beforeSend:

函数，因为csrf令牌使用了

beforeSend:

函数。谢谢，我已经识别并解决了这个错误。现在我得到了成功警报。

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

  $.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));