Fatal编程技术网
  • javascript/
  • 通过AJAX（普通JavaScript）发布请求在Node.js（express/body parser/ejs）上生成空对象

通过AJAX（普通JavaScript）发布请求在Node.js（express/body parser/ejs）上生成空对象

javascript node.js ajax express

通过AJAX（普通JavaScript）发布请求在Node.js（express/body parser/ejs）上生成空对象,javascript,node.js,ajax,express,body-parser,Javascript,Node.js,Ajax,Express,Body Parser,我在使用AJAX和香草Javascript发送post请求时遇到困难。每次我发布一个请求时，它总是在服务器控制台上打印一个空对象，我试图在发送之前检查（console.log）该对象，看起来还可以，但不知何故，服务器只接收到一个empy对象。当我尝试用jquery发送post-req时，对象会以应该的方式在服务器上打印出来（我将在下面附上这两个代码）。我试过阅读其他用户的帖子，但似乎找不到问题所在。这是我的密码： 香草JS： <script> document.getElem

我在使用AJAX和香草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>
服务器代码：

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);
    });
};
App.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');
尝试使用您的代码时，只需包含
app.use（bodyParser.json（））
。它会起作用的

app.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;

<!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>
index.ejs

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;

<!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>


$（文档）.ready（函数（）{
$（'form'）。在（'submit'，function（）上{
变量项=$（“表单输入”）；
var todo={item:item.val（）}；
$.ajax({
键入：“POST”，
url:“/todo”，
数据：todo，
成功：功能（数据）{
//通过前端框架处理数据
location.reload（）；
}
});
返回false；
});
});
当您试图通过vanilla javascript向运行express和node的后端服务器发送数据时，解决此问题的一个好方法是：

首先，在后端的主文件（其中有app.listen（））上添加以下内容：

//配置。
使用（express.json（））；
use（express.urlencoded（{extended:false}））；
在routes/whatever.js文件（您将处理post请求的文件）上，您需要检查请求的主体：

router.post（“/”，（req，res）=>{
const{the，variables，you，expect}=req.body；
//添加一个try块来检查变量并处理错误（或按您喜欢的方式处理）
});
现在通过vanilla javascript发送数据：

函数sendPostData（数据）{
/*
@参数：数据
数据将是一个字符串，包含应创建的文件名。
例如：data=“database.txt”
*/
const xhr=new XMLHttpRequest（）；
xhr.open（“POST”http://localhost:8000/“，对）；
/*
*注意，我们使用的是application/json，而不是application/x-www-form-urlencoded解析器
*/
setRequestHeader（“内容类型”、“应用程序/json”）；
send（JSON.stringify（{“data”：data}））；
console.log（xhr.responseText）；
}
包括您的服务器端script@Tuhin好的，我已经包含了itTry
xhr.send（JSON.stringify（todo））；
和
（“内容类型”，“应用程序/JSON；字符集=UTF-8”）；
@eL_G0ndR0nK尝试将你的
app.post（'/todo'
更改为
app.post（“*”
。@Faizuddin&David已经试过了，不是workHahahaaa，是的，现在可以了，谢谢你，Ratnadeep先生，如果使用vanilla js发布，为什么我必须包含app.use（bodyParser.json（））？该请求与使用jquery的请求有什么区别？它将以json格式解析帖子数据。你可以参考更多信息。