How to send data to HTML page and how to use AJAX for Single Page Application in NodeJS Server using express.js framework?

问题

How can I display the form submitted data in another HTML Page

From 1st page (page1.html)collecting the data from users and after appending this data in the database I want to show the submitted values in another page i.e.(page4.html)

Below is my code

I have tried using res.sendFile or 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>

回答1:

nAs I can see in your code

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

Your form method is "GET", it should be "POST" as your API is "POST".

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

While sending and HTML file you need to send your submitted data too.

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

In order to save your hurdle switch to Single Page Application and use some JavaScript frame work like AngularJs, ReactJs or if not then also stick to single page and use Ajax calls for submit calls.

Else see "ejs" in place of "HTML" and use scriptlet to send and show data over HTML.

To send data to "ejs" via expressJs

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

With Ajax you can do this:

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

Server side code I'm assuming you are using express.js and body-parser

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

来源：https://stackoverflow.com/questions/51967362/how-to-send-data-to-html-page-and-how-to-use-ajax-for-single-page-application-in

标签

html

node.js

express

ejs

body-parser