如何使用express.js框架将数据发送到HTML页面以及如何在NodeJS Server中的单页面应用程序中使用AJAX？_随笔

如何使用express.js框架将数据发送到HTML页面以及如何在NodeJS Server中的单页面应用程序中使用AJAX？

我可以在您的代码中看到

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

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/5505940.html

如何使用express.js框架将数据发送到HTML页面以及如何在NodeJS Server中的单页面应用程序中使用AJAX？

发表评论

评论列表（0条）