例如,我想向客户端发出信号,通过POST方法以HTML格式发送的用户名已存在于我的数据库中.
我知道如何使用body-parser恢复POST数据,我知道如何在MySQL数据库中查找它.
我知道我可以使用Ajax直接在表单上编写错误消息.我的NodeJS服务器需要发送什么以及它如何发送这些信息？
我搜索了大量的教程,我刚刚找到了他们发送新HTML页面的解决方案.我想保持我的网页相同,并使用appendChild()等函数发布错误消息.
小智 9
有几种方法你可以从服务器端发送数据,所以NodeJS,到客户端 - 我假设在你的情况下将是一些像main.js处理DOM模拟的JavaScript文件.
因此,您可以发送数据的第一种方式是通过像Handlebars这样的模板引擎.有一个易于使用的快递模块,你可以到这里:hbs.
现在快速总结一下这样的引擎是如何工作的,我们基本上就像你在教程中看到的那样发送一个HTML文件,然而,像Handlebars这样的模板引擎允许我们动态地发送带有该文件的实际数据,所以我们要做的是渲染一个特定的Handlebars 模板(核心只是HTML),并将JavaScript对象传递给渲染调用,该调用将包含您要传递到该文件的所有数据,然后在.hbs文件中访问它.
所以在服务器端,我们会写这样的东西,假设我们有一个文件调用home.hbs并设置Handlebars作为模板引擎:
router.get('/home', function(req,res) {
var dataToSendObj = {'title': 'Your Website Title', 'message': 'Hello'};
res.render('home',dataToSendObj);
});
并home.hbs像这样访问:
<html>
<header>
{{title}}
</header>
<body>
message from server: {{message}}
</body>
</html>
现在,这种方法的问题在于,如果您想动态更新页面上的数据,而不必重新加载页面,那么使用模板引擎并不理想.相反,就像你说的那样,你会使用AJAX.
因此,第二你可以从你的服务器的NodeJS到您的网站的前端发送数据的方式,是使用异步AJAX调用.
首先,添加一个路由到您用于AJAX进行调用的任何路由处理程序.这有一些逻辑可能访问数据库,进行一些检查并将一些有用的信息返回给客户端.
router.get('/path/for/ajax/call', function(req,res) {
// make some calls to database, fetch some data, information, check state, etc...
var dataToSendToClient = {'message': 'error message from server'};
// convert whatever we want to send (preferably should be an object) to JSON
var JSONdata = JSON.stringify(dataToSendToClient);
res.send(JSONdata);
});
假设您有一些文件,例如main.js,使用回调创建一个AJAX请求来监听某些事件响应,如下所示:
var req = new XMLHttpRequest();
var url = '/path/for/ajax/call';
req.open('GET',url,true); // set this to POST if you would like
req.addEventListener('load',onLoad);
req.addEventListener('error',onError);
req.send();
function onLoad() {
var response = this.responseText;
var parsedResponse = JSON.parse(response);
// access your data newly received data here and update your DOM with appendChild(), findElementById(), etc...
var messageToDisplay = parsedResponse['message'];
// append child (with text value of messageToDisplay for instance) here or do some more stuff
}
function onError() {
// handle error here, print message perhaps
console.log('error receiving async AJAX call');
}
总结一下使用AJAX的上述方法,这将是交互的流程:
希望这有用!
| 归档时间： |
|
| 查看次数： |
6991 次 |
| 最近记录： |