Sending a POST request through Javascript on Django - failed to retrieve data

Question

I'm trying to send a POST request to my Django view using plain javascript (I don't want any unnecessary libraries involved). The data is not sent through a form, but by using fetch. For now I just want to be able to manipulate the request.POSTin my views.py, nothing more.

Here's my code:
Javascript

let article = document.querySelector('article')
articleId = article.getAttribute('data-product-id')

# some other stuff
fetch("{% url 'shop:shoplist' 1 %}", { 
              method: 'POST',
              dataType: "application/json", 
              data: {'article_id': articleId},
              headers: {'X-CSRFToken': csrf_token}
              })

Python

if request.method == 'POST':
    testing = request.POST
    return JsonResponse({'test': testing})

The request is sent, the csrftoken is received correctly, but the request.POST returns just <QueryDict: {}>, instead of what I'm expecting (headers, data...).

I've searched and found a lot of similar questions, the most similar one being this one, but still I can't seem to find a solution.

Any idea?

ndpu · Accepted Answer · 2018-10-25 18:04:06Z

1

Try to add 'content-type' to headers in fetch call (instead of dataType parameter) and change data parameter to body with stringified object:

fetch("{% url 'shop:shoplist' 1 %}", { 
              method: 'POST',
              body: JSON.stringify({'article_id': articleId}),
              headers: {
                  'X-CSRFToken': csrf_token,
                  'Content-Type': 'application/json'
              }})

edited Oct 25, 2018 at 18:04

answered Oct 25, 2018 at 17:56

ndpu

22.6k6 gold badges62 silver badges72 bronze badges

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

2 Comments

ndpu Over a year ago

@Nobsyde try with JSON.stringify

Nobsyde Over a year ago

oh wow sorry I didn't see you also changed the data (now body) parameter, it works! To be more precise, both you and @blue_note have it right: there were 2 errors: (1) using data instead of body and (2) asking for request.POSTinstead of request.body. Thank you both!

blue note · Accepted Answer · 2018-10-25 17:42:16Z

0

The request.POST contains only the parameters that are form encoded. Since your data type is application/json they are empty. The request.body contains the actual json data.

answered Oct 25, 2018 at 17:42

blue note

29.5k10 gold badges83 silver badges110 bronze badges

2 Comments

Nobsyde Over a year ago

I've tried to change the code with: testing = request.body print(testing) but the printed value is now b''

blue note Over a year ago

@Nobsyde: add "Content-Type": "application/json; charset=utf-8" to the headers. I'm not sure what dataType does in your request.

Collectives™ on Stack Overflow

Sending a POST request through Javascript on Django - failed to retrieve data

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related