将列表从前端 (react) 传递到后端 (django)

Question

I am using React for my front-end and I have a list that I want to process in my back-end (I am using DJango for my back-end) What are the possible ways for me to pass my array list from the front-end to the back-end.

I tried saving to create objects of my list and save them in the DB and then process them but it did not work! (or maybe I did not know how to use it correctly).

mylist= ['a','b','c'];

// somewhere here or laterI want to pass mylist to the back end.
fetch('http://localhost:8000/getSentences').then((response) => response.json()).then(function(data) {
        console.log(data); 
}

I do not expect any result because I did not pass the data that I need to work on!

Answer 1

If you are using the native fetch API for sending data to server you can send it via this way:

fetch('http://localhost:8000/getSentences', {
  method: 'POST', //or your desired method here
  body: JSON.stringify(listHere)
})

Fetch have an options object when we create an API call, you can send data in it and on the server you will get the data in request object with body parameter.

Mean while in server you can do:

body_unicode = request.body.decode('utf-8')
body = json.loads(body_unicode)
# body is now your list which you have passed from front end.

NOTE: If you are thinking to pass data in the URL, I'll prefer not to do this because its a complete list, we usually use URL params when we want to get something and we just need to send one or two variables to the server. The way which I have described is the best and its a standard.

Answer 2

You can't pass the array directly,

Use jQuery.param(yourObject) .

The param() method creates a serialized representation of an array or an object that can be understandable by various frameworks like php, ruby, django etc.

For again converting it to python

from urllib import parse
value = parse.parse_qs(self.request.POST.get('name'))

Note that using prase you can lost some information, so recheck your data after getting it in python.