Question

我不知道为什么，但是当我尝试使用req.body.newFullName查看数据时，我得到了一个空对象。帖子将按照正确的路线进行操作，但是我不知道如何访问XMLHttpRequest发送的表单的字段数据。

下面是我使用的大多数代码。

路由设置app.js

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var bodyParser = require('body-parser')
var indexRouter = require('./routes/index'); 
var usersRouter = require('./routes/users');
var app = express();
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
module.exports = app;

路线详细信息users.js

var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});
/* POST contacts */
router.post("/", function(req,res,next){
  data = req.body.newFullName;

  res.send(data);
})
module.exports = router;

表单详细信息index.html

...
<form id="contacts">
<label for="FullName">Full Name:</label>
<input type="text" name="newFullName" placeholder="Enter Full Name..."><br>
<input type="submit" value="Submit data">
</form>
...

提交表单数据的js

window.addEventListener("load",function(){
    function createContact(){
        var XHR = new XMLHttpRequest();
        var frmData = new FormData(form);
        XHR.open("POST", "http://localhost:3000/users/");
        XHR.send(frmData);
    };
    var form = document.getElementById("contacts");
    form.addEventListener("submit", function(event){
        event.preventDefault();
        createContact();
    });
});

谢谢您的帮助！

Answer 1

问题在于客户端代码；您正在发送multipart/formdata，但期望在服务器上访问application/x-www-form-urlencoded。

这是当前的发送方式：

function createContact() {
    const payload = new URLSearchParams(new FormData(form));
    fetch("http://localhost:3000/users/", {
        method: "POST",
        body: payload
    })
    .then(rawReply => rawReply.text())
    .then(reply => console.log("reply", reply))
    .catch(err => console.error(err));
};

如果您在浏览器中检查了请求，您会发现它现在可以正确显示参数而不是原始文本。

如何读取发送到我的快速路线的数据？

1 个答案: