How can I retrieve my post request using JavaScript

Question

I have two projects, the first one is Node.JS.

        jsonobj = JSON.stringify(generateMockData)
        xhrToSoftware.send(jsonobj);
        xhrToAPI.open("POST", "http://127.0.0.1:8000/path/", true);
        xhrToAPI.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xhrToAPI.send(jsonobj);

It's sending data to the second project Django Python. I can receive the data using my views.py.

post_data = json.loads(request.body.decode("utf-8")) 
value = post_data.get('data')
print(value)

But I want to directly get the data from Node.JS to my Django Templates (javascript or jquery) is that possible?

for example:

<script>
 //get the data that posted by the node.js
</script>

UPDATE:

I tried using the answers below like this one:

fetch('http://127.0.0.1:8000/path/')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => console.error(error));

but I'm having an error it says that:

SyntaxError: Unexpected token '<', "<!-- 
 
<d"... is not valid JSON

I think that's because I'm returning an html file in my views.py:

def data(request):
    if request.method == 'POST':
        post_data = json.loads(request.body.decode("utf-8"))  # for simulation
        value = post_data.get('data')
    return render(request, 'waterplant/iot/data.html')

so, I change it to jsonresponse like this:

def data(request):
    if request.method == 'POST':
        post_data = json.loads(request.body.decode("utf-8"))  # for simulation
        value = post_data.get('data')
        return JsonResponse({"msg": value}, status=200)

After that I'm having an error ValueError: The view views.data didn't return an HttpResponse object. It returned None instead. I think that's because the value is empty yet. How can I prevent that? If I send a data using my Node.JS I want to return it as return JsonResponse({"msg": value}, status=200) Or you have any idea that I can access the data directly in my Django Python templates <script> here </script>

Are you trying get data from db using nodejs or trying to make a request from UI to nodejs server? Because here both the UI and server are using JavaScript.. :| — Nithin P.H
– Nithin P.H, Commented Nov 16, 2022 at 10:32

Alex · Accepted Answer · 2022-11-16 10:55:10Z

1

Basic js fetch()

If you use method "GET":

fetch('http://127.0.0.1:8000/path')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => console.error(error));

If you use method "POST":

fetch(`http://127.0.0.1:8000/path`, {
            method: "POST",
            headers: {"Content-type": "application/json; charset=UTF-8"},
            body: data
        })
        .then(response => response.json())
        .then(json => {
            console.log(json);
        })
        .catch(error => console.error('Error on fetch() call:\n', error));

Hope it could be useful!

answered Nov 16, 2022 at 10:55

Alex

8591 gold badge6 silver badges8 bronze badges

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

2 Comments

Gnani Kim Over a year ago

I tried the GET one but I'm having error it says VM60366:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!-- <d"... is not valid JSON

Alex Over a year ago

It may be that the data you receive is not a json, in (.then(response => response.json()) we expect to receive a json, if instead you receive a different type of data, it must be specified, for example if you know you receive a string, it will be (.then(response => response.text()) More info: - developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch - freecodecamp.org/news/…

Nithin P.H · Accepted Answer · 2022-11-16 11:08:36Z

1

If a get request is to be made from your webpage use fetch()

fetch('http://127.0.0.1:8000/path')
     .then((response) => response.json())
     .then((data) => console.log(data));

edited Nov 16, 2022 at 11:08

answered Nov 16, 2022 at 10:36

Nithin P.H

7322 gold badges10 silver badges34 bronze badges

2 Comments

Gnani Kim Over a year ago

I tried this one but I'm having error it says VM60366:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!-- <d"... is not valid JSON

Nithin P.H Over a year ago

there is a lot of assumption from my side since we dont have the code snippet and im not clear of the language u have provided above. return JsonResponse({"msg": value}, status=200) is still not json is it? should the code be more like this JsonResponse({"msg": value, 'status':200});

Collectives™ on Stack Overflow

How can I retrieve my post request using JavaScript

2 Answers 2

2 Comments

2 Comments

Your Answer

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

Related