如何使用express.js框架将数据发送到HTML页面以及如何在NodeJS Server中的单页面应用程序中使用AJAX？

一尘不染

如何使用express.js框架将数据发送到HTML页面以及如何在NodeJS Server中的单页面应用程序中使用AJAX？

node.js

如何在另一个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>

阅读 270

2020-07-07

共1个答案

一尘不染

我可以在您的代码中看到

<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”，由于API为“ POST”，因此应为“ 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
    });
 });

2020-07-07