Ajax发布数据从表单发送到express js body解析器
我试图通过ajax将表格数据发送到节点js， 我在节点js上使用带有body解析器的express 但我在req.body中未定义
我在网上搜索每一个并尝试了很多东西，没有什么对我有用，请帮助我正确的方法。
| * | Html代码：
<html lang="en">
<head>
<script src=".2.1/jquery.min.js"></script>
<title>Add</title>
</head>
<body>
<h1>Welcome to Website </h1>
<form id="addUserForm">
<h3> Enter the your details : </h3>
Name :<br><input type="text" name="nameView"><br><br>
Email :<br><input type="email" name="mailView"><br><br>
Mobile :<br><input type="number" name="mobileView"><br><br>
<input type="submit" value="Submit">
</form>
| * | Ajax代码：
<script>
$(document).ready( function()
{
$('#addUserForm').submit(function()
{
var formDataVar = new FormData($(this)[0]);
console.log(formDataVar);
$.ajax({
url: '/addUserFormSubmit',
type:'POST',
data: formDataVar,
dataType: 'json',
contentType: false,
processData: false,
}).done(function(ResJryVar)
{
console.log(ResJryVar);
});
})
});
</script>
</body>
</html>
| * |我也尝试过：
var formDataVar = new FormData();
formDataVar.append( 'nameView', input.files[0] );
formDataVar.append( 'mailView', input.files[1] );
formDataVar.append( 'mobileView', input.files[2] );
和
var formDataVar = {};
$.each($('#addUserForm').serializeArray(), function(i, field)
{
formDataVar[field.name] = field.value;
});
| * |节点Js代码：
var express = require("express");
var bodyParser = require("body-parser");
var app = express();
app.listen(8888,function()
{
console.log("Server Started and Running ...");
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.get('/',addUserFormFnc);
app.post('/addUserFormSubmit',addUserSubmitFnc);
function addUserFormFnc(req, res)
{
res.sendFile('addUser.html', {root: __dirname });
}
function addUserSubmitFnc(req, res)
{
console.log("Data Received : ");
var userObjVar =
{
nameView: req.body.nameView,
mailView: req.body.mailView,
mobileView: req.body.mobileView
};
console.log(userObjVar);
res.send(userObjVar);
}
回答如下：
body-parser库不处理用multipart/form-data编码的数据。如果要发送该类型的数据，您应该使用类似multer中间件的东西。
但在你的情况下，我认为你可以逃脱而不必使用FormData界面。你可以像这样重写你的浏览器代码：
const $form = $('#addUserForm')
$form.on('submit', submitHandler)
function submitHandler (e) {
e.preventDefault()
$.ajax({
url: '/addUserFormSubmit',
type:'POST',
data: $form.serialize()
}).done(response => {
console.log(response)
})
}
Ajax发布数据从表单发送到express js body解析器
我试图通过ajax将表格数据发送到节点js， 我在节点js上使用带有body解析器的express 但我在req.body中未定义
我在网上搜索每一个并尝试了很多东西，没有什么对我有用，请帮助我正确的方法。
| * | Html代码：
<html lang="en">
<head>
<script src=".2.1/jquery.min.js"></script>
<title>Add</title>
</head>
<body>
<h1>Welcome to Website </h1>
<form id="addUserForm">
<h3> Enter the your details : </h3>
Name :<br><input type="text" name="nameView"><br><br>
Email :<br><input type="email" name="mailView"><br><br>
Mobile :<br><input type="number" name="mobileView"><br><br>
<input type="submit" value="Submit">
</form>
| * | Ajax代码：
<script>
$(document).ready( function()
{
$('#addUserForm').submit(function()
{
var formDataVar = new FormData($(this)[0]);
console.log(formDataVar);
$.ajax({
url: '/addUserFormSubmit',
type:'POST',
data: formDataVar,
dataType: 'json',
contentType: false,
processData: false,
}).done(function(ResJryVar)
{
console.log(ResJryVar);
});
})
});
</script>
</body>
</html>
| * |我也尝试过：
var formDataVar = new FormData();
formDataVar.append( 'nameView', input.files[0] );
formDataVar.append( 'mailView', input.files[1] );
formDataVar.append( 'mobileView', input.files[2] );
和
var formDataVar = {};
$.each($('#addUserForm').serializeArray(), function(i, field)
{
formDataVar[field.name] = field.value;
});
| * |节点Js代码：
var express = require("express");
var bodyParser = require("body-parser");
var app = express();
app.listen(8888,function()
{
console.log("Server Started and Running ...");
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.get('/',addUserFormFnc);
app.post('/addUserFormSubmit',addUserSubmitFnc);
function addUserFormFnc(req, res)
{
res.sendFile('addUser.html', {root: __dirname });
}
function addUserSubmitFnc(req, res)
{
console.log("Data Received : ");
var userObjVar =
{
nameView: req.body.nameView,
mailView: req.body.mailView,
mobileView: req.body.mobileView
};
console.log(userObjVar);
res.send(userObjVar);
}
回答如下：
body-parser库不处理用multipart/form-data编码的数据。如果要发送该类型的数据，您应该使用类似multer中间件的东西。
但在你的情况下，我认为你可以逃脱而不必使用FormData界面。你可以像这样重写你的浏览器代码：
const $form = $('#addUserForm')
$form.on('submit', submitHandler)
function submitHandler (e) {
e.preventDefault()
$.ajax({
url: '/addUserFormSubmit',
type:'POST',
data: $form.serialize()
}).done(response => {
console.log(response)
})
}