通过AJAX(Vanilla JavaScript)的POST请求在Node上产生空对象.js(express/body

Question

我在使用 AJAX 和 Vanilla Javascript 发送 post 请求时遇到困难。每次我发布请求时，它总是在服务器控制台上打印一个空对象，我试图在发送之前检查(console.log(该对象，这似乎没问题，但不知何故服务器只收到一个 empy 对象。当我尝试使用 jquery 发送 post req 时，对象会以应有的方式在服务器上打印出来(我将在下面附加这两个代码(。我尝试阅读其他用户的帖子，但我似乎找不到问题所在。这是我的代码：

香草 JS：

<script>
    document.getElementById('postForm').addEventListener('submit', postName);
    function postName(event) {
        event.preventDefault();
        var item = document.getElementById('item').value;
        var todo = {
            item: item
        };
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/todo', true);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded parser');
        xhr.onload = function () {
            location.reload();
            console.log(todo);
            console.log(this.responseText);
        }
        xhr.send(todo);
    }
</script>

这是jquery版本：

$(document).ready(function(){
  $('form').on('submit', function(){
    var item = $('form input');
    var todo = {item: item.val()};
    $.ajax({
      type: 'POST',
      url: '/todo',
      data: todo,
      success: function(data){
        //do something with the data via front-end framework
        location.reload();
      }
    });
    return false;
  });
});

服务器代码：

var bodyParser = require('body-parser');
var data = [{item: 'get milk'}, {item: 'walk dog'}, {item: 'kick some coding ass'}];
var urlencodedParser = bodyParser.urlencoded({extended: false});
module.exports = function(app) {
    app.get('/todo', function(req, res) {
        res.render('todo', {todos: data});
    });
    app.post('/todo', urlencodedParser, function(req, res) {
        console.log(req.body);
        data.push(req.body);
        res.json(data);
    });
};

应用.js：

var express = require('express');
var todoController = require('./controllers/todoController');
var app = express();
// set up template engine
app.set('view engine', 'ejs');
// static files
app.use(express.static('./public'));
// fire controllers
todoController(app);
// listen to port
app.listen(3000);
console.log('You are listening to port 3000');

Answer 1

当您尝试通过 vanilla javascript 将数据发送到运行 express 和 node 的后端服务器时，解决此问题的一个好方法是：

首先，在后端的主文件(您有 app.listen(( (的主文件上，添加以下内容：

// Configs.
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

在 routes/whatever.js 文件(您将处理 post 请求的文件(上，您需要检查请求的正文：

router.post("/", (req, res) => {
    const { the, variables, you, expect } = req.body;
    // Add a try block to check the variables and treat errors ( or handle it the way you like
});

现在通过vanilla javascript发送数据：

function sendPostData(data) {
    /*
        @param: data
            Data will be a string containing the name of the file that shall be created.
            Ex: data = "database.txt"
    */
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "http://localhost:8000/", true);
    /*
        * Note that we're using application/json instead of application/x-www-form-urlencoded parser
    */
    xhr.setRequestHeader("Content-type", "application/json"); 
    xhr.send(JSON.stringify({"data": data}));
    console.log(xhr.responseText);
}

Answer 2

尝试使用您的代码，您只需要包含app.use(bodyParser.json()) .它会工作

应用.js

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.get('/todo', function(req, res) {
    res.render('todo', {todos: data});
});
app.post('/todo', function(req, res) {
    console.log(req.body);
});
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});
// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  // render the error page
  res.status(err.status || 500);
  res.render('error');
});
module.exports = app;

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <form  method="post">
      <input type="text"/>
      <input type="submit"/>
    </form>
    <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
  <script>
      $(document).ready(function(){
          $('form').on('submit', function(){
              var item = $('form input');
              var todo = {item: item.val()};
              $.ajax({
                  type: 'POST',
                  url: '/todo',
                  data: todo,
                  success: function(data){
                      //do something with the data via front-end framework
                      location.reload();
                  }
              });
              return false;
          });
      });
  </script>
  </body>
</html>