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

Question

我是 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
            |.&nbsp;
        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');
  })
};

Answer 1

您的服务器应该 return JSON 而不是呈现 HTML。在前端，您应该使用 JavaScript（例如 jQuery 和方法 $.getJSON()）来查询您的服务器以获取更新的任务列表。 jQuery 将使用 AJAX 从您的服务器发送和接收数据，而无需刷新您的页面。网上有很多关于如何使用 Node.js.

制作 REST API 的好教程

Answer 2

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

我强烈建议您看一下 AngularJS, but that can be a daunting framework for a beginner. I would definitely first learn 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 选择器，这就是想法:)

一旦我们有了想要 post 到服务器的数据，我们就用数据发出 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 () { ... });
});

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

Update the todo list without refreshing the page in express nodejs app

javascript

asynchronous

node.js

express

mean-stack