更新待办事项列表，而无需刷新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'); }) };
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的很好的教程。