代码之家 › 专栏 › 技术社区 › KiKu

如何将数据发送到HTML页面,如何使用express.js框架在NodeJS服务器中为单页面应用程序使用AJAX?

body-parser ejs express node.js html

KiKu · 技术社区 · 6 年前

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

1 回复 | 直到 6 年前

NAVIN 6 年前

我可以从你的代码中看到

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

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

在发送和HTML文件时,也需要发送提交的数据。

res.sendFile(目录名+'/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>

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