栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何使用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    }); });


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/514881.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号