Intereting Posts

更新待办事项列表,而无需刷新express nodejs应用程序中的页面

我是快速nodejs应用程序的新手。 我想做一个待办事项列表。 这是迄今为止的样子。 我的问题是当我添加一个待办事项,它需要一些时间来显示更改,因为它重新加载页面。 如何在不重新加载页面的情况下实时查看更改。 提前致谢。

tasks.jade中

h1= title .list .item.add-task div.action form(action='/tasks', method='post', id='12345') input(type='hidden', value='true', name='all_done') input(type='hidden', value=locals._csrf, name='_csrf') input(type='submit', class='btn btn-success btn-xs', value='all done') form(action='/tasks', method='post') input(type='hidden', value=locals._csrf, name='_csrf') div.name input(type='text', name='name', placeholder='Add a new task') div.delete input.btn.btn-primary.btn-sm(type="submit", value='add') if (tasks.length === 0) | No tasks. each task, index in tasks .item div.action form(action='/tasks/#{task._id}', method='post') input(type='hidden', value=task._id.toString(), name='id') input(type='hidden', value='true', name='completed') input(type='hidden', value=locals._csrf, name='_csrf') input(type='submit', class='btn btn-success btn-xs task-done', value='done') div.num span=index+1 |.  div.name span.name=task.name + ' (Created at: ' + moment(task.createTime).format("YYYY/MM/DD") + ')' //- no support for DELETE method in forms //- http://amundsen.com/examples/put-delete-forms/ //- so do XHR request instead from public/javascripts/main.js div.delete a(class='btn btn-danger btn-xs task-delete', data-task-id=task._id.toString(), data-csrf=locals._csrf) delete 

app.js中

 app.get('/', routes.index); app.get('/tasks', tasks.list); app.post('/tasks', tasks.markAllCompleted) app.post('/tasks', tasks.add); app.post('/tasks/:task_id', tasks.markCompleted); app.delete('/tasks/:task_id', tasks.del); app.get('/tasks/completed', tasks.completed); 

tasks.js中

 exports.add = function(req, res, next){ if (!req.body || !req.body.name) return next(new Error('No data provided.')); req.db.tasks.save({ name: req.body.name, createTime: new Date(), completed: false }, function(error, task){ if (error) return next(error); if (!task) return next(new Error('Failed to save.')); console.info('Added %s with id=%s', task.name, task._id); res.redirect('/tasks'); }) }; 

Solutions Collecting From Web of "更新待办事项列表,而无需刷新express nodejs应用程序中的页面"

ExpressJS是一个服务器端框架。 这意味着它在浏览器提出请求时提供视图。 为了防止浏览器在与页面交互时进行整页刷新,您需要查看客户端框架。

我强烈build议大家看看AngularJS ,但这对初学者来说可能是一个令人畏惧的框架。 如果你还没有,我肯定会先学习JQuery 。 许多其他框架直接在JQuery之上构build,或者模仿JQuery使用的一些模式。 我会首先关注JQuery,然后gradle到像AngularJS这样的更高级别的框架。

下面是劫持使用JQuery提交表单的一个例子:

 <script type="text/javascript"> $('#myForm').on('submit', function (event) { event.preventDefault(); // Stop the form from causing a page refresh. var data = { username: $('#username').val(), password: $('#password').val() }; $.ajax({ url: 'http://localhost/my/url', data: data, method: 'POST' }).then(function (response) { // Do stuff with the response, like add it to the page dynamically. $('body').append(response); }).catch(function (err) { console.error(err); }); }); </script> 

如果将该脚本标记放在页面的底部,就在closures</body>标记之前,它将劫持一个ID为myForm的表单,并为submit事件附加一个事件处理程序。 提交表单时,事件处理程序将首先触发。 处理程序event.preventDefault()的第一行告诉浏览器不要执行默认的提交行为并刷新页面。 然后,我们创build一个data对象来存储我们感兴趣的表单域的值。在这个例子中,我使用了一个ID为“username”的文本input和一个ID为“password”的密码input。 注意你传递给$()的string看起来很像CSSselect器,这就是主意:)

一旦我们有了要发布到服务器的数据,我们就会用数据发出一个AJAX请求,然后处理响应,或者发生任何错误。 这个AJAX请求发生而不刷新页面:)

这个脚本必须在页面底部的原因是因为元素需要在运行之前加载。 JQuery可以在运行脚本之前确保整个文档已经准备就绪。

 $(document).on('ready', function (event) { // This code won't run until the whole page is ready. }); 

如果你把你的代码放在那个事件处理程序中,那么你可以把脚本标记放在页面的任何地方,甚至在<head> 。 JQuery为这个事件处理程序提供了一个快捷方式,因为它被使用了很多。

 $(function (event) { // This is sugar for $(document).on('ready', function () { ... }); }); 

您的服务器应该返回JSON而不是呈现的HTML。 在前端你应该使用JavaScript(例如jQuery和方法$ .getJSON())来查询你的服务器的更新任务列表。 jQuery将使用AJAX从您的服务器发送和接收数据,而不需要刷新页面。 网上有很多关于如何使用Node.js制作REST API的很好的教程。