req.body（请求正文）在nodejs中使用ajax提交表单给出一个空值答案

【问题标题】：req.body (request body) gives an empty value with ajax submitting form in nodejsreq.body（请求正文）在nodejs中使用ajax提交表单给出一个空值
【发布时间】：2019-09-05 01:43:27
【问题描述】：

我是 nodejs 的新手，我在 nodejs 中遇到了一个问题。我正在尝试通过req.body 访问控制器中的表单值。

控制器：

exports.createNavigation = (req, res, next) =>{
console.log(req.body);// this is always blank
}

AJAX：

$.ajax({
  url: "<%- pathHelper.baseUrl('admin/navigation/create') %>",
  type: "POST",
  //data: {'name': 'kashif'}, //this is working and i get name in controller
  data: new FormData($("#create-form")[0]), //trying to get this in controller
  processData: false,
  contentType: false,
  dataType: "json",
  beforeSend: function() {
    $("#createBtn").attr("disabled", true);
    $(".message_box")
      .html("")
      .removeClass("alert-success")
      .addClass("hide alert-danger");
  },
  error: function(jqXHR, exception) {
    $("#createBtn").attr("disabled", false);
    var msg = formatErrorMessage(jqXHR, exception);
    $(".message_box")
      .html(msg)
      .removeClass("hide");
  },
  success: function(data) {
    $("#createBtn").attr("disabled", false);
    $(".message_box")
      .html(data.msg)
      .removeClass("hide alert-danger")
      .addClass("alert-success");
  }
});

表格：

<form class="form-horizontal" id="create-form">
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label"
      >Name <i class="has-error">*</i></label
    >
    <div class="col-sm-6">
      <input
        type="text"
        class="form-control"
        name="name"
        placeholder="Name"
        value=""
      />
    </div>
  </div>
</form>

服务器/app.js

    var PORT = process.env.PORT || 3000 ;

//imports
const http =  require('http');
const path =  require('path');
const rootDir = require('./util/path').rootDir;
const express = require('express');
const bodyParser =  require('body-parser');
const admnRoutes = require('./routes/admin');
const errorController = require('./controllers/admin/errorController');
const mongoConnect = require('./util/database').mongoConnect;
const session = require('express-session');
const MongoDBStore = require('connect-mongodb-session')(session);
const app = express();
const store = new MongoDBStore({
    uri: '****',
    collection: 'sessions'
});
//template engine
app.set('view engine', 'ejs');
app.set('views', 'views');

//utils and heplers
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({'extended': false}));
app.use(express.static(path.join(rootDir, 'public')));
app.use(session({
    secret:'my sercret',
    resave:false,
    saveUninitialized:false,
    store:store,
}));
//routes
app.use('/admin', admnRoutes);
app.get('/', errorController.login);
app.use(errorController.page404);

//create table and run server
mongoConnect(() => {
    app.listen(PORT);
})

我正在尝试使用 ajax 发布表单并尝试获取 controller 中的值。如果我使用data: {'name': 'kashif'}，那么我可以访问console.log 中的名称但无法访问表单数据

【问题讨论】：

能否也添加 server.js 代码。
@RahulSharma，我已经添加了 server.js 代码
@kashif 尝试使用data : $('#create-form').serialize(); 而不是new FormData($("#create-form")[0])。
@ambianBeing，它适用于序列化，但为什么 nodejs 和 formdata 中的 mutipart 有问题？？
@kashif 问题不在于发送multipart/form-data，如果您正在发送，它是在快递端理解/解析。你需要像 multer 这样的东西来做到这一点。由于您没有任何文件输入，因此表单根本不这样做new FormData($("#create-form")[0]) 将其作为表单数据发送。

标签： node.js ajax express ejs

【解决方案1】：

其实有两种方式。

最简单的方法，您正在尝试发送多部分/表单数据。您可以序列化表单数据。例如，

var $form = $("#create-form");

$.ajax({
  url: "<%- pathHelper.baseUrl('admin/navigation/create') %>",
  type: "POST",
  //data: {'name': 'kashif'}, //this is working and i get name in controller
  data: $form.serialize(), // serialize will help you
  processData: false,
  contentType: false,
  dataType: "json",
  beforeSend: function() {
    $("#createBtn").attr("disabled", true);
    $(".message_box")
      .html("")
      .removeClass("alert-success")
      .addClass("hide alert-danger");
  },
  error: function(jqXHR, exception) {
    $("#createBtn").attr("disabled", false);
    var msg = formatErrorMessage(jqXHR, exception);
    $(".message_box")
      .html(msg)
      .removeClass("hide");
  },
  success: function(data) {
    $("#createBtn").attr("disabled", false);
    $(".message_box")
      .html(data.msg)
      .removeClass("hide alert-danger")
      .addClass("alert-success");
  }
});

您可以使用 multer npm 包来发送 multipart/form-data。

【讨论】：