Ale*_*ack 1 javascript asynchronous node.js express mean-stack
我是 express 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 是一个服务器端框架。这意味着它会在浏览器发出请求时提供视图。为了防止浏览器在与页面交互时刷新整个页面，您需要查看客户端框架。
我强烈建议看看AngularJS，但这对于初学者来说可能是一个令人生畏的框架。如果你还没有，我肯定会先学习JQuery。许多其他框架要么直接构建在 JQuery 之上，要么模仿 JQuery 使用的一些模式。我会首先专注于 JQuery，然后升级到更高级别的框架，如 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>
如果您将该脚本标记放在页面底部，就在结束</body>标记之前，它将劫持具有该 ID 的表单并为该myForm事件附加一个事件处理程序submit。当表单提交时，事件处理程序将首先触发。处理程序的第一行event.preventDefault()告诉浏览器不要执行默认提交行为并刷新页面。然后我们创建一个data对象来存储我们感兴趣的表单字段的值。在这个例子中，我使用 ID 为“username”的文本输入和 ID 为“password”的密码输入。请注意您传递给的字符串$()看起来很像 CSS 选择器，这就是想法:)
一旦我们有了要发布到服务器的数据，我们就可以使用数据发出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 () { ... });
});
| 归档时间： |
|
| 查看次数： |
11415 次 |
| 最近记录： |