how Convert .ajax() to fetch()

Question

I'm trying to use JavaScript's fetch library to make a form submission to my Django application. However no matter what I do it still complains about CSRF validation. my code fetch don't work

ajax

  function myidLikeCom(params) {

    
      $.ajax({
        type: 'POST',
        url: '{% url "boards:likeComment" %}',
        data: {
          postid: params,
          csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
          action: 'post'
        },
        success: function (json) {
          document.querySelector(`#myidLikeCom${params}`).innerText = "json['result']";
        },
        error: function (xhr, errmsg, err) {
  
        }
      });
    }

fetch don't work

  function myidLikeCom(params) {
        let data= {
          postid: params,
          csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
        }  
fetch('{% url "boards:likeComment" %}', {
    method: 'POST',
    body: data, 
})     
    }

yagus · Accepted Answer · 2021-11-18 20:17:17Z

1

Please see Django documentation for how to pass the CSRF token using AJAX.

You need to pass the token in the appropriate header.

    $.ajax({
        type: 'POST',
        url: '{% url "boards:likeComment" %}',
        headers: {
        'X-CSRFToken': $('input[name=csrfmiddlewaretoken]').val(),
        'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'
        },
        data: {
          postid: params,
          action: 'post'
        },
        success: function (json) {
          document.querySelector(`#myidLikeCom${params}`).innerText = "json['result']";
        },
        error: function (xhr, errmsg, err) {
  
        }
      });

answered Nov 18, 2021 at 20:17

yagus

1,4758 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

xh9tlf8d82 Over a year ago

please convert this code to fetch

Collectives™ on Stack Overflow

how Convert .ajax() to fetch()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related