如何使用express.js框架将数据发送到HTML页面以及如何在NodeJS Server中的单页面应用程序中使用AJAX？ [英] How to send data to HTML page and how to use AJAX for Single Page Application in NodeJS Server using express.js framework?
问题描述
如何在另一个HTML页面中显示表单提交的数据
How can I display the form submitted data in another HTML Page
从第一页（page1.html）收集用户的数据并将此数据附加到我想在另一个页面中显示提交的值，即（page4.html）
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)
下面是我的代码
我尝试使用res.sendFile或res.send
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>
推荐答案
n我可以在您的代码中看到
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>
您的表单方法是 GET，它应该是 POST，因为您的API是 POST
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">
在发送HTML文件时，您也需要发送已提交的数据。
While sending and HTML file you need to send your submitted data too.
res.sendFile（__ dirname +'/page4.html'）;
res.sendFile(__dirname + '/page4.html');
为了将跨栏开关保存到单页应用程序并使用一些JavaScript框架，例如AngularJs，ReactJs
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.
否则请参见 ejs代替 HTML，并使用脚本通过HTML发送和显示数据。
Else see "ejs" in place of "HTML" and use scriptlet to send and show data over HTML.
将数据发送至 ejs 通过expressJs
To send data to "ejs" via expressJs
res.render('show.ejs', {message});
使用Ajax，您c这样做：
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
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
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
});
});
这篇关于如何使用express.js框架将数据发送到HTML页面以及如何在NodeJS Server中的单页面应用程序中使用AJAX？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
