Einreichen einer AJAX-Anfrage unter Verwendung von Vanilla JS

Hier ist mein aktueller Code, ich möchte ein Objekt (Rezept) in ein Array auf der Serverseite schieben, aber ich bin noch nicht einmal so weit gekommen. Im Moment versuche ich nur, console.log (rezept) auf dem Server zu erstellen und nicht definiert.Einreichen einer AJAX-Anfrage unter Verwendung von Vanilla JS

HTML:

<button type='button' class='btn btn-warning add-recipe'><i class="fa fa-book" aria-hidden="true" onclick='addRecipe(<%= JSON.stringify(recipe.author.id) %>)'></i></button>

JavaScript (Client):

function addRecipe(recipe){ 
    var xml = new XMLHttpRequest(); 
    var recipe = recipe; 
    xml.open("POST", "/add-recipe", true); 
    xml.send({recipe: recipe}); 
}

JavaScript (Server):

router.post('/add-recipe', function(req, res) { 
    var recipe = req.body.recipe; 
    console.log(recipe); 
})

Quelle

2017-11-13 David

Irgendwann verwenden müssen Sie 'JSON.stringify haben()' Ihre Daten vor dem Senden. – Andy

'xml.setRequestHeader ('Content-Type', 'application/json')'. Auch 'var rezept = Rezept 'ist nicht notwendig; Sie haben bereits eine Variable mit dem Namen 'recipe' an die Funktion übergeben. Sie könnten folgendes tun: 'var rezept = JSON.stringify (rezept);'. Zusätzlich, nur um sicher zu sein, 'console.log (JSON.stringify (rezept, false, 2))' innerhalb 'addRecipe()' und [validiere es] (https://jsonlint.com/). – wscourge

Ich empfehle die Verwendung der Fetch-API, XMLHttpRequest-Methode ist veraltet. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch –

Einige Änderungen sind sowohl in Frontend und Backend- Vorderseite erforderlich -Ende Änderungen

function addRecipe(recipe){ 
    var xml = new XMLHttpRequest(); 
    var recipe = recipe; 
    xml.open("POST", "/add-recipe", true); 
    xml.setRequestHeader("Content-type", "application/json; charset=utf-8"); 
    xml.send(JSON.stringify({recipe: recipe})); 
}

Für die Back-End-json in Express verbrauchen Sie den Körper Parser

var bodyParser = require('body-parser'); 
// I am assuming router the name of your express app 
router.use(bodyParser.json()); 

router.post('/add-recipe', function(req, res) { 
    var recipe = req.body.recipe; 
    console.log(recipe); 
})

Quelle

2017-11-13 14:34:32 UchihaItachi

Das war es! Vielen Dank! Router war nur eine Modul-Routendatei und ich hatte require ('body-parser') in die Hauptdatei app.js aufgenommen, aber nicht app.use (bodyParser.json()); – David

Wenn dies der Fall ist, akzeptiere bitte meine Antwort – UchihaItachi

Einreichen einer AJAX-Anfrage unter Verwendung von Vanilla JS

Antwort

Verwandte Themen