如何使用express.js框架将数据发送到HTML页面以及如何在NodeJS Server中的单页面应用程序中使用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>
问题答案：
我可以在您的代码中看到
<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
});
});
-
问题内容： 因此，我有一个应用程序（facebook应用程序实体），并且有一个页面。我想通过Java代码（通过restfb或任何其他建议）使用该应用发布到页面。似乎我错过了页面授予应用程序发布权限的阶段。不知道该怎么做。谢谢你们。友利 问题答案： 您只能发布“作为页面”，而不能发布“作为应用”。您需要页面访问令牌，并且需要使用/ page-id / feed端点进行发布。链接与信息和示例代码： h
-
本文向大家介绍如何使用Google Analytics（分析）跟踪单页应用程序中的页面？，包括了如何使用Google Analytics（分析）跟踪单页应用程序中的页面？的使用技巧和注意事项，需要的朋友参考一下 单页应用程序(SPA)加载浏览整个站点所需的资源。这是用于首页加载，SPA是Web应用程序或网站。 当您单击站点的链接并且用户与页面进行交互时，内容将动态加载。加载时，跟踪器中存储的数据也
-
问题内容： 当我学到角度时，有两个问题困扰着我： 当用户刷新页面或点击后退按钮时，如何恢复状态？ 如何在属于不同控制器的合并范围之间共享数据？ 下面我展示了一个使用客户端会话存储的简单解决方案。在用户刷新页面或点击后退按钮后，它既允许共享公共数据，又可以自动恢复状态。 注意：事实证明，以下解决方案对于回答以下问题至关重要： 如何获得“后退”按钮以与AngularJSui路由器状态机一起使用？ 问题
-
问题内容： 我想要做的是每当用户选择图片并单击按钮时，它将把图像移动到特定的文件夹，并将链接保存到数据库的user_image列。 我的问题是，单击“提交”按钮后，图片的实际名称未保存在数据库列中。示例多数民众赞成在数据库中保存的值没有图片文件名。 我认为photo.php没有收到文件的值，任何人都可以帮助我解决它。 脚本： photo.php 问题答案： 看看这个http://malsup.co
-
本文向大家介绍如何在页面引用外部的html页面？相关面试题，主要包含被问及如何在页面引用外部的html页面？时的应答技巧和注意事项，需要的朋友参考一下 1.是完整的页面。拥有，。使用 2.是一个页面片段。使用请求。或者使用
-
问题内容： 我有一个PHP include，它需要一段时间才能加载，因为PHP必须获取很多数据。我不想放慢整个网页的加载，以等待包含此内容，那么如何使用ajax加载该包含内容呢？我不希望通过单击按钮来触发Ajax，而只是希望它在页面加载时加载包含，因此，如果您查看下面的示例，则会在显示内含代码的同时显示“更多HTML内容”。 php仍在加载中。 问题答案： 如果您使用的是jQuery，则可以使用他