html - Ajax 将表单中的数据发送到 Express js 正文解析器

标签 html node.js ajax express body-parser

我正在尝试通过ajax将表单数据发送到node js,
我在 Node js 上使用带有主体解析器的 Express
但我在 req.body 中未定义

我在网上搜索了所有内容并尝试了很多方法,但没有任何对我有用的 请帮助我找到正确的方法。

|*| html代码:

<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.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;
});

|*| Node 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 接口(interface)即可摆脱困境。您只需重写浏览器代码即可:

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)
  })
}

关于html - Ajax 将表单中的数据发送到 Express js 正文解析器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46372715/

相关文章:

html - CSS 省略号将句子分成新行

javascript - 如何使用 cradle 在一次通话中创建多个附件

node.js - npm 链接,不安装,package.json 依赖

javascript - 使用jquery从数据库中记录的现有值中操作选择选项

javascript - 通过 XMLHttpRequest() 下载时如何避免缓存数据

Outlook 中的 HTML 电子邮件背景中断布局 - 使用 vml 方法

c# - MVC5 通过 Jquery Ajax 返回通用对象列表

javascript - Firefox 3.0 中的无限刷新循环

html - 使用伪元素设计标题

javascript - wait 对于 collection.insertMany() 无法正常工作?