Nodejs求助！为什么前端脚本post的数据，在express4.x下面用req.body获取不到，为undefinded？

Nodejs求助！为什么前端脚本post的数据，在express4.x下面用req.body获取不到，为undefinded？

前端脚本: $.ajax({ type : ‘POST’, url : ‘/addattr’, data : {“Action”:“get”,“Name”:“lulu”} }) 服务器端： app.post(’/addattr’, function(req, res){ console.log(req.body) });

5 回复

Node.js 求助！为什么前端脚本 post 的数据，在 express 4.x 下用 req.body 获取不到，为 undefined？

前端脚本

$.ajax({
    type: 'POST',
    url: '/addattr',
    data: {"Action": "get", "Name": "lulu"}
});

服务器端

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

app.use(express.json()); // 添加这行代码
app.use(express.urlencoded({ extended: true })); // 添加这行代码

app.post('/addattr', function(req, res) {
    console.log(req.body);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

在 Express 4.x 中，处理 POST 请求中的请求体（body）需要使用中间件来解析请求体。默认情况下，Express 不会自动解析请求体。因此，你需要手动添加解析中间件。

为什么需要这些中间件？

  • express.json()：用于解析 JSON 格式的请求体。
  • express.urlencoded({ extended: true })：用于解析 URL 编码的请求体，例如 application/x-www-form-urlencoded。

示例代码解析

  1. 引入依赖：

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

  2. 添加中间件：

    app.use(express.json());
app.use(express.urlencoded({ extended: true }));

  3. 处理 POST 请求：

    app.post('/addattr', function(req, res) {
    console.log(req.body); // 输出 { Action: 'get', Name: 'lulu' }
});

通过添加这两个中间件，Express 将能够正确解析客户端发送的 POST 数据，并将其存储在 req.body 中。这样，你就可以在服务器端通过 req.body 访问到前端传递的数据了。


express4下用了router，不再用app

请参考我的文章“使用express4.x版和Jade模板重写《nodejs开发指南》微博实例 ”， 网址：http://cnodejs.org/topic/53f23e198f44dfa35129c43b 前端我用的是jade模板生成的html: layout.jade的代码：

doctype html html head title= title link(rel=‘stylesheet’, href=’/stylesheets/bootstrap.css’) link(rel=‘stylesheet’, href=’/stylesheets/style.css’) link(rel=‘stylesheet’, href=’/stylesheets/bootstrap-responsive.css’) script(src=’/javascripts/jquery.js’) script(src=’/javascripts/bootstrap.js’) body div.navbar.navbar-fixed-top div.narbar-inner div.container a(class=‘btn btn-navbar’ data-toggle=‘collapse’ data-target=’.nav-collapse’) span.icon-bar span.icon-bar span.icon-bar a(class=‘brand’ href=’/’) Microblog div.nav-collapse ul.nav li.active a(href=’/’) 首页

      - if (!user)
        li
          a(href='/login') 登录
        li
          a(href='/reg') 注册
      - else
        li
          a(href='/logout') 退出

div#container.container

  • if (success) div.alert.alert-success= success
  • if (error) div.alert.alert-error= error
    block content div#footer.footer !=’<hr />‘ p a(href=‘http://www.hotelanywhere.cn’ target=’_blank’) Tony Zhang [@2014](/user/2014) All Right Reserved

注册页面reg.jade的代码，使用form，直接post到当前页

extends layout

block content

form(class=‘form-horizontal’ method=‘post’) fieldset legend 用户注册 div.control-group label(class=‘control-label’ for=‘username’) 用户名 div.controls input(type=‘text’ class=‘input-xlarge’ id=‘username’ name=‘username’) p(class=‘help-block’) 你的账户名称，用于登录和显示 div.control-group label(class=‘control-label’ for=‘password’) 密码 div.controls input(type=‘password’ class=‘input-xlarge’ id=‘password’ name=‘password’) div.control-group label(class=‘control-label’ for=‘password’) 请再次输入密码 div.controls input(type=‘password’ class=‘input-xlarge’ id=‘password-repeat’ name=‘password-repeat’) div.form-actions button(type=‘submit’ class=‘btn btn-primary’) 注册

index.js中的代码片段，接收并解析post

router.post("/reg", checkNotLogin); router.post("/reg", function(req, res) { console.log(req.body[‘password’]); console.log(req.body[‘password-repeat’]); if(req.body[‘password-repeat’] != req.body[‘password’]){ req.flash(‘error’, ‘两次输入的密码不一致’); return res.redirect(’/reg’); } var md5 = crypto.createHash(‘md5’); var password = md5.update(req.body.password).digest(‘base64’);

var newUser = new User({ name: req.body.username, password: password, }); //检查用户名是否已经存在 User.get(newUser.name, function(err, user) { if (user) { err = ‘Username already exists.’; } if (err) { req.flash(‘error’, err); return res.redirect(’/reg’); }

newUser.save(function(err) { if (err) { req.flash(‘error’, err); return res.redirect(’/reg’); } req.session.user = newUser; req.flash(‘success’, req.session.user.name+‘注册成功’); res.redirect(’/’); });

}); });

没有加body-parser吧

要解决这个问题，你需要确保在Express应用中正确地配置了解析请求体的中间件。默认情况下，Express不解析请求体中的数据。你需要使用 body-parser 或 express.json() 中间件来处理。

示例代码

  1. 安装依赖

    如果你还没有安装 express 和 body-parser，可以使用以下命令进行安装：

    npm install express body-parser

  2. 服务器端代码

    在你的服务器代码中添加 express.json() 中间件：

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

// 使用中间件解析JSON格式的请求体
app.use(express.json());

app.post('/addattr', (req, res) => {
    console.log(req.body); // 输出: { Action: 'get', Name: 'lulu' }
    res.send('Data received');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

  3. 前端脚本

    确保你的前端脚本正确发送了数据：

    $.ajax({
    type: 'POST',
    url: '/addattr',
    data: JSON.stringify({ "Action": "get", "Name": "lulu" }),
    contentType: 'application/json', // 设置请求头，告诉服务器这是一个JSON对象
    success: function(response) {
        console.log(response);
    },
    error: function(error) {
        console.error(error);
    }
});

解释

  • express.json() 是一个内置中间件，用于解析JSON格式的请求体。
  • data: JSON.stringify(...) 将数据转换为JSON字符串。
  • contentType: 'application/json' 告诉服务器请求体是JSON格式。

通过这些步骤，你应该能够正确接收并打印出请求体中的数据。

回到顶部