Question

我正在尝试将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()。从那里，我只需用以下内容调用控制器：

表达

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函数只是控制台记录信息，但如前所述，req.body是一个空对象。所有提示都表示赞赏。

Answer 1

XHR希望您的数据能够以您期望的方式进行编码或打包，这与其他库包装器（如jQuery或Angular Ajax包装器函数）不同。此外，body-parser中间件未识别内容类型，并且未针对所需请求进行激活。

只需JSON.stringify您的json数据

data = JSON.stringify(data);

并将application/json MIME类型添加为xhr的{{1}}标题。

content-type

此外，如果您想使用xhr.setRequestHeader("content-type", "application/json");在附加之前对数据进行编码并添加相应的标题内容类型。

我的完整测试代码（供参考）：

服务器（url-encoded）：

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

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

1 个答案: