时间戳

首页 > 解决方案 > 如何使用 express.js 框架将数据发送到 HTML 页面以及如何在 NodeJS 服务器中使用 AJAX 进行单页应用程序？

html - 如何使用 express.js 框架将数据发送到 HTML 页面以及如何在 NodeJS 服务器中使用 AJAX 进行单页应用程序？

问题描述

如何在另一个 HTML 页面中显示表单提交的数据

从第一页（page1.html）收集来自用户的数据并将这些数据附加到数据库中后，我想在另一个页面中显示提交的值，即（page4.html）

下面是我的代码

我试过使用 res.sendFile 或 res.send

server.post('/addname', (req, res) => {

  const user = {
      timestamp: new Date,
      FName: req.body.FName,
      LName: req.body.LName,
      Phone: req.body.Phone,
      Email: req.body.email,
      Contact: req.body.business,
      Business: req.body.contact,
      OTP: req.body.otp_field
  }

 res.sendFile(__dirname + '/page4.html');
//along with file rediraction, how can i send or show the "User" vaules in respactivte filed  


});
<body>
    <div>   
        <div align="center">
          <form action="/addname" method="GET">
            <label>Please enter below details</label><br><br>
            <label>First Name *: </label><input id="FName" type="text" name="FName"/><br><br>
            <label>Last Name *: </label><input id="LName" type="text" name="LName"/><br><br>         
            <label>Email Address *: </label><input type="email" name="email"><br><br>
            <br><br>
            <input type="submit" value="Submit" /></form>
        </div>
    </div>
</body>

标签： htmlnode.jsexpressejsbody-parser

解决方案

n正如我在您的代码中看到的

<body>
    <div>   
        <div align="center">
        <form action="/addname" method="GET">
            <label>Please enter below details</label><br><br>
            <label>First Name *: </label><input id="FName" type="text" name="FName"/><br><br>
            <label>Last Name *: </label><input id="LName" type="text" name="LName"/><br><br>         
            <label>Email Address *: </label><input type="email" name="email"><br><br>
            <br><br>
            <input type="submit" value="Submit" /></form>
        </div>
    </div>
</body>

您的表单方法是“GET”，它应该是“POST”，因为您的 API 是“POST”。

server.post('/addname', (req, res) => {
<form action="/addname" method="GET">
//Just change to 
<form action="/addname" method="POST">

在发送 HTML 文件时，您还需要发送提交的数据。

res.sendFile(__dirname + '/page4.html');

为了将您的障碍切换到单页应用程序并使用一些 JavaScript 框架，如 AngularJs、ReactJs，或者如果没有，那么也坚持单页并使用 Ajax 调用进行提交调用。

否则，请参阅“ejs”代替“HTML”并使用scriptlet通过 HTML 发送和显示数据。

通过 expressJs 将数据发送到“ejs”

res.render('show.ejs', {message});

使用 Ajax，您可以这样做：

HTML

<body>
    <div>   
        <div align="center">
        <form id="form1">
            <label>Please enter below details</label><br><br>
            <label>First Name *: </label><input id="FName" type="text" name="FName"/><br><br>
            <label>Last Name *: </label><input id="LName" type="text" name="LName"/><br><br>         
            <label>Email Address *: </label><input type="email" name="email"><br><br>
            <br><br>
            <input type="button" value="Submit" onClick:"submitForm()"/>
        </form>
        <div id="showValue"></div>
        </div>
    </div>
</body>

JavaScript

function submitForm() {
    $.ajax({
        url: '/addName',
        type: 'POST',
        headers: headers,
        data: {
            "Fname": $("#FName").val(),
            "Lname": $("#LName").val(),
            "email": $("#email").val()
        },
        success: function(result) {
            //append result to your html
            //Dynamic view
            $("#form1").hide();
            var html = '<div><span>First Name: ' + result.fName + '</span><span>Last Name: ' + result.lName + '</span></div>';
            $("#showValue").html(html);    
        },
        error: function (error) {
            alert('error ',error);
        }
    });
}

服务器端代码我假设您使用的是express.js和body-parser 

app.post('/addName', (req, res) => {
    //Insert into db
    var body = req.body;
    res.send({
       fName: body.FName,
       lName: body.LName
    });
 });

推荐阅读