JavaScript / Nodejs：ajax POST请求不传递对象到后端

我试图发布一个JSON对象到我的服务器，但是当我控制日志req.body它显示一个空的对象。 这是我的代码：

 var submitRecipe = () => { let recipe = {alias: null, description: null, instructions: null}; recipe.alias = document.getElementById('alias').value; recipe.description = document.getElementById('description').value; recipe.instruction = document.getElementById('instructions').value; postRequest("/createrecipe", recipe, (xhr) => { console.log("Hello!" + JSON.parse(xhr.responseText)); }) }; var postRequest = (url, data, callback = undefined) => { xhr.onreadystatechange = () => { //Call a function when the state changes. if(xhr.readyState == 4 && xhr.status == 200) { console.log("testing"); return callback(200 , xhr.responseText); }else{ return callback(400, xhr.responseText); } } xhr.open('POST', url) xhr.send(data); } 

节点

 createRecipe = function(req, res){ console.log(req.body); } 

我使用express来传输服务器信息，而我正在使用bodyParser.json() 。 从那里，我只是打电话给控制器：

performance

 var express = require("express"); var bodyParser = require("body-parser"); var server = express(); var recipeController = require("./controllers/recipeController"); server.use(bodyParser.json()); server.use(bodyParser.urlencoded({ extended: true})); server.post("/createrecipe", recipeController.createRecipe); 

createRecipe函数只是控制台logging信息，但如前所述， req.body是一个空对象。 所有提示都表示赞赏。

Answer 1

XHR期望你的数据被编码或打包，不pipe你期望它发送什么样的方式，不像其他库包装如jQuery或Angular Ajax包装函数。 body-parser中间件也不能识别Content-type，并且没有为所需的请求激活。

简单的JSON.stringify你的JSON数据

 data = JSON.stringify(data); 

并将application/json MIMEtypes添加为xhr的content-type头。

 xhr.setRequestHeader("content-type", "application/json"); 

另外，如果您想使用url-encoded编码，请在附加和添加相应的标题内容types之前对数据进行编码。

我的完整testing代码（仅供参考）：

服务器 （ testServer.js ）：

 var express = require("express"); var bodyParser = require("body-parser"); var server = express(); server.use(bodyParser.json()); server.use(bodyParser.urlencoded({ extended: true})); server.post("/createrecipe", function(req, res){ console.log(req.body); var resp = {server: "hello world", dataReceived: req.body}; res.json(resp); }); server.get("/", function(req, res){ res.sendFile(__dirname + "/testClient.html"); }) server.listen(3000, function(){ console.log("Server running"); }) 

客户端 （ testClient.html ）：

 <input type="text" id="alias" value="a"> <input type="text" id="description" value="b"> <input type="text" id="instructions" value="c"> <button onclick="submitRecipe()"> TEST</button> <script> var submitRecipe = () => { let recipe = {alias: null, description: null, instructions: null}; recipe.alias = document.getElementById('alias').value; recipe.description = document.getElementById('description').value; recipe.instructions = document.getElementById('instructions').value; postRequest("/createrecipe", recipe, (status, xhr) => { var data = (JSON.parse(xhr.responseText)); console.log(data.dataReceived); }) }; var postRequest = (url, dataObj, callback = undefined) => { //--------------Added line-------------------- var data = JSON.stringify(dataObj); //--------------Added line-------------------- var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { //Call a function when the state changes. if(xhr.readyState == 4 && xhr.status == 200) { return callback(200 , xhr); }else if(xhr.status == 400){ return callback(400, xhr); } } xhr.open('POST', url) //--------------Added line-------------------- xhr.setRequestHeader("content-type", "application/json"); //--------------Added line-------------------- xhr.send(data); } </script>