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
是一个空对象。 所有提示都表示赞赏。
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>