Question

我正在为我的应用程序使用Node.Js和express框架。

我构建HTML表单，并且在提交后无法根据API请求接收form数据。

我的HTML：

<form method="post" action="/create">
    <input type="text" name="user.name" />
    <input type="text" name="user.email" />
    <input type="text" name="user.address.city" />
    <input type="text" name="user.address.land" />
    <input type="submit" value="Submit">
</form>

JSON对象应该在我的API上获得：

{
   "user": {
      "name": "toto",
      "email": "toto@mail.com",
      "address": {
         "city": "yyyyy",
         "land": "zzzz"
      }
   }
}

如何使用Express。4的Node.js做到这一点，还有另一个库吗？

Answer 1

您可以准备自己的中间件，该中间件使用body-parser的objSelection.TypeText BodyTEXT解析传入的表单数据，并将其转换为结构化JSON：

urlencoded()

Answer 2

您将在HTML代码中发布到创建路径。

因此，您需要创建一条路线

const express = require('express')
const bodyParser = require('body-parser')
const app = express()

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

app.post('/create', function(req, res) {
  console.log('----- MY BODY -----')
  console.log(req.body)
  // do something more clever
  res.send('We posted to this route')
})

首先我们需要Express，然后我们需要body-parser，最后初始化我们的Express应用。

然后我们使用body-parser的json middlewere解析正文，以便我们可以在处理程序中轻松访问它。

然后，我们定义到'/create'的路线，该路线接受发布请求（请记住您的表单正在发布到此位置）。

我们的处理程序所做的全部工作就是console.log请求的主体，然后显示消息我们发布到此路由

Answer 3

遵循专门为指导新生nodejs-frontend-sample-for-freshers

而创建的指南存储库

编辑：

您可以使用Ajax调用来提交表单，这也将有助于单页应用

客户端JS：

function submit() {
    // JavaScript uses `id` to fetch value
    let email               = $("#email").val(),
        name                = $("#name").val(),
        city                = $("#city").val(),
        land                = $("#land").val();

    // Can validate each field here and show error like:
    if ( validateEmail(email) ) {
        $("#emailError").addClass("hide");
    } else {
        $("#emailError").removeClass("hide");
        return;
    }

    // form request data, doing this will get you data in correct form at NodeJs API
    let data = {
        user: {
            email,
            name,
            address: {
                city,
                land
            }
        }
    };

    $.ajax({
        "url": "/create",
        "method": "POST",
        "data": data
    })
    .then( result => {
        // On success empty all the input fields.
        $("#email").val('');
        $("#name").val('');
        $("#city").val('');
        $("#land").val('');

        // Message to notify success submition
        alert("Successfully added user.");
        return;
    })
    .catch( err => {
        // Notify in case some error occured
        alert("An error occured.");
        return;
    });
}

// Validate Email based upon pattern
function validateEmail (email) {
    if ( email && email.match(/^([A-z0-9_.]{2,})([@]{1})([A-z]{1,})([.]{1})([A-z.]{1,})*$/) ) {
        return true;
    }
    return false;
}

HTML：

<form>
    <input type="text" id="name" />
    <input type="text" id="email" />
    <span id="emailError" class="hide error">Valid Email Required</span>
    <input type="text" id="city" />
    <input type="text" id="land" />
    <p onclick="submit()">Submit</p>
</form>

建议您也使用cors.js，例如：

const cors = require('cors');

// Cross-Origin Resource Sharing
app.use(cors());

您可以通过两种方式获取对象：

1：无需使用诸如此类的额外模块

app.post('/create', function (request, response, next) {

    let body       = [];

    request.on('error', (err) => {
        console.error(err);
    }).on('data', (chunk) => {
        body.push(chunk);
    }).on('end', () => {
        body       = Buffer.concat(body).toString();
        console.log(body); // Your object
        request.body = body;  // Store object in request again

        next();
    });
}, (req, res) => {
    console.log(req.body); // This will have your object 
});

将body-parser与express一起使用：

```

// configure the app to use bodyParser() to extract body from request.
// parse urlencoded types to JSON
app.use(bodyParser.urlencoded({
    extended: true
}));

// parse various different custom JSON types as JSON
app.use(bodyParser.json({ type: 'application/*+json' }));

// parse some custom thing into a Buffer
app.use(bodyParser.raw({ type: 'application/vnd.custom-type' }));

// parse an HTML body into a string
app.use(bodyParser.text({ type: 'text/html' }));

app.post('/create', function (request, response, next) {
    console.log(request.body);  // `body-parser did what I did earlier`
});

```

如何在NodeJs中使用express从请求中提取正文？

3 个答案: