如何在另一个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
body-parser
app.post('/addName', (req, res) => { //Insert into db var body = req.body; res.send({ fName: body.FName, lName: body.LName }); });