Mar 09, 2023

2402

Node.js POST Verarbeitung

Hallo Zusammen,

ich möchte Daten an meinen Node.js Express Server senden und mir in der Console ausgeben lassen.
Das senden funktioniert soweit...

'use strict';  

document.getElementById("anzeige").addEventListener("click",function(){  

    let data =  [{
        "material" : "60089",  
        "lagerort" : "2000",  
        "mhd" : "24"  
    }]


    getFile('/zwmbestand',data,function(sap){  
       
    });

});

function getFile(uri,data,mycallback){
 
    let http = new XMLHttpRequest();

    http.open('POST',uri);  
    http.setRequestHeader('Content-Type', 'application/json');  
    http.onload = function(){
        if(http.status == 200){
                mycallback(this.response) 
        }
        else {
            console.log("Error" + http.status);          
        }        
    }
    http.send(JSON.stringify(data));
};

Ich bekomme aber irgendwie immer undefined ausgegeben.

"use strict";  

const express = require('express');  
const fs = require('fs');  

const app = express();

app.post('/zwmbestand',(req,res,next) => {  
               
    console.log(req.body);                                                                      
   res.send("erledigt");   
});

Ich hoffe es ist nur ein kleines Problem

MfG

Scheufler

Please also mark the comments that contributed to the solution of the article

Content-Key: 6288375032

Url: https://administrator.de/contentid/6288375032

Printed on: April 27, 2024 at 06:04 o'clock

7 Comments

Latest comment

Hi,

NodeJS kann standardmäßig nicht selbst auf den body eines Express-Request objektes zugreifen. Dafür musst du noch den body-parser installieren.

npm i body-parser

Diesen musst du dann noch deinem Server übergeben:

const bodyparser = require('body-parser');  
app.use(bodyparser.urlencoded({extended: true}));

Damit solltest du dann auch auf den Inhalt des bodys zugreifen können.

Hi,

Danke für die schnelle Info. Statt mein undefined bekomme ich nun die geschweiften klammern

Server is running on Port 8080
{}

als Payload wird mir aber der String angezeigt...

[{"material":"60089","lagerort":"2000","mhd":"24"}]

ah ich habe es...

mein Header stand noch auf application/json. Nach der Änderung auf...

http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

funktioniert es.

bzw. dann mit

app.use(bodyparser.json())

auch mit application.json

Danke für deine Hilfe

Zitat von @Florian86:

ah ich habe es...

mein Header stand noch auf application/json. Nach der Änderung auf...

http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

funktioniert es.

bzw. dann mit

app.use(bodyparser.json())

auch mit application.json

Danke für deine Hilfe

Ja stimmt, hatte ganz vergessen zu erwähnen das wenn du JSON nutzt noch

app.use(bodyparser.json());

genutzt werden muss.

Aber freut mich das es klappt

Ja Danke vielmals... Ich habe den XMLHTTPREQUEST nun noch vereinfacht und nutze async/await mit fetch

    const options = {
        method: 'POST',  
        headers:{ 'Content-Type': 'application/json' },  
        body:JSON.stringify(data)
    };

async function postfile(options){
    const response = await fetch('/zwmbestand',options);  
    const data = await response.json();

Das funktioniert auch soweit nur habe ich so dasselbe Problem wie bei der XMLRequest Variante, dass beim ersten mal klicken immer noch der alte Wert geladen wird. Erst beim zweiten Click kommt das richtige Ergebnis.

Es wird ja asyncron ausgeführt aber ich dachte wenn ich mit await arbeite müsste es doch funktionieren.

LG

Florian

Diese Request kommt aus dem JS, welches auf der Seite ausgeführt wird? Oder ist das vom Express?

Habe das mal bei mir selbst aufgesetzt und getestet. Soweit beim testen funktioniert alles. Hier der Code, welchen ich in der Browser-Konsole ausführe:

'use strict';  

async function postData() {
  const exampleData = {
    user: 'test',  
    isAdmin: true,
  };

  const rOptions = {
    method: 'POST',  
    headers: {
      'Content-Type': 'application/json',  
    },
    body: JSON.stringify(exampleData),
  };

  const response = await fetch('http://localhost:3000/zwmbestand', rOptions);  
  const data = await response.json();
  return data;
}

(function () {
  postData()
    .then(data => console.log(data))
    .catch(error => console.error(error));
})();

Und hier mein Express-Server:

// Import
const bodyParser = require('body-parser');  
const server = require('express')();  
const cors = require('cors');  

// Use middlewares
server.use(bodyParser.urlencoded({extended: true}));
server.use(bodyParser.json());
server.use(cors());

// POST
server.post('/zwmbestand', async (req, res) => {  
  console.log(req.body);
  res.json({success: true, message: 'works'});  
});

// Start
server.listen(3000, () => {
  console.log('Express server running on port 3000');  
});

Als Ergebnis bekomme ich in der Browser-Konsole den JSON-String "{success: true, message: 'works'}" angezeigt. In meiner Express-Konsole wird mir der Request-Body angezeigt mit den Daten. Ich nutze hier noch die CORS-Middleware, da die Anfrage aus dem Browser sonst nicht an den Express-Server durchgeht.

//Edit
Habe auch mal noch geschaut, ob der Express-Server auch alte Daten anzeigt und habe das Skript unterschiedlichen usernamen ausgeführt. Bei allen drei Versuchen kam auch im Express der jeweils neuste Datensatz mit.

Danke. Ich hatte nicht auf der Serverseite gewartet... nun geht es

German solved Question JavaScript