如何在Django中发起AJAX发帖请求

Question

我想在 Django 中使用 ajax 发表评论。

我有与帖子 class 相关的消息 Class，我使用 PostDetailView 显示帖子和评论的内容。

我成功地在控制台上显示了已发布的评论。

我收到错误jquery.js:9664 POST http://127.0.0.1:8000/post/39 403 (Forbidden)

这是我的代码

视图.py

class PostDetailView(DetailView):
    model = Post
        
    def post(self,request,*args,**kwargs):
        if request.method == 'POST':
            postid = request.POST.get('postid')
            comment = request.POS.get('comment')            
            # post = Post.objects.get(pk=postid)
            user = request.user
            Message.objects.create(
                user = user,
                post_id = postid,
                body = comment
            )
            return JsonResponse({'bool':True})

html(这里对应评论区)

{% if request.user.is_authenticated %}
  <div>
    <form method="POST" action="" id="form_area">
      {% csrf_token %}
      <input
        class="form-control mr-sm-2 comment-text"
        type="text"
        name="body"
        placeholder="Write Your message here..."
      />
      <button
        class="btn btn-outline-success my-2 my-sm-0 save-comment"
        type="submit"
        data-post="{{object.id}}"
        data-url="{% url 'post-detail' object.id %}"
      >
        Comment
      </button>
    </form>
  </div>
  {% else %}

脚本.js

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]);
      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);
}
function sameOrigin(url) {
  // test that a given url is a same-origin URL
  // url could be relative or scheme relative or absolute
  var host = document.location.host; // host + port
  var protocol = document.location.protocol;
  var sr_origin = "//" + host;
  var origin = protocol + sr_origin;
  // Allow absolute or scheme relative URLs to same origin
  return (
    url == origin ||
    url.slice(0, origin.length + 1) == origin + "/" ||
    url == sr_origin ||
    url.slice(0, sr_origin.length + 1) == sr_origin + "/" ||
    // or any other URL that isn't scheme relative or absolute i.e relative.
    !/^(\/\/|http:|https:).*/.test(url)
  );
}
$.ajaxSetup({
  //   headers: { "X-CSRFToken": getCookie("csrftoken") },
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
      // Send the token to same-origin, relative URLs only.
      // Send the token only if the method warrants CSRF protection
      // Using the CSRFToken value acquired earlier

      xhr.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
      //   xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  },
});


$(document).ready(function () {
  $(".save-comment").on("click", function (e) {
    e.preventDefault();
    let _comment = $(".comment-text").val();
    let _postid = $(this).data("post");
    let $crf_token = $('[name="csrfmiddlewaretoken"]').attr("value");
    $.ajax({
      url: $(this).data("url"),
      type: "post",
      headers: { "X-CSRFToken": $crf_token },
      data: {
        comment: _comment,
        postid: _postid,
        csrfmiddlewaretoken: "CSRF-TOKEN-VALUE",
      },
      dataType: "json",
      beforeSend: function () {
        $(".save-comment").addClass("disabled").text("saving...");
        console.log(_comment);
      },
      success: function (res) {
        $(".save-comment").removeClass("disabled").text("Submit");
      },
    });
  });
});

我所有的代码

我怎样才能解决这个问题？

Answer 1

这很可能与 csrf 令牌有关。 似乎您正在以两种不同的方式获取令牌。 如果您从我推荐的某个地方复制了代码，请简化它并按照文档中的推荐方式进行操作。

由于您在表单中使用csrf并假设您设置了中间件，因此您应该将CSRF_USE_SESSIONS和CSRF_COOKIE_HTTPONLY设置为 False。 因此，只需将您从getcookie获得的变量传递到请求headers: {'X-CSRFToken': csrftoken}并删除let $crf_token = $('[name="csrfmiddlewaretoken"]').attr("value"); 因为看起来您正在使用ajaxSetup来使用getcookie设置标头，但随后您覆盖了它

如果您仍然遇到问题，我建议您注释掉您正在做的所有这些额外检查，请按照文档中的简单示例进行操作。 然后，如果你真的需要它们，再开始一次又一次地添加检查，直到它坏了，这样你就可以追根溯源了