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

我是express nodejs应用程序的新手。我想列一张待办事项清单。到目前为止，情况就是这样。我的问题是，当我添加todo时，需要一些时间来显示更改，因为它会重新加载页面。如何在不重新加载页面的情况下实时查看更改。 提前谢谢

在任务中。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);

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');
  })
};

在tasks.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);

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');
  })
};

---

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

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

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

我强烈建议大家看看，但对于初学者来说，这可能是一个令人望而生畏的框架。如果你还没学，我肯定会先学。许多其他框架要么直接构建在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>

如果将代码放在该事件处理程序中，则可以将脚本标记放在页面上的任何位置，甚至是

中。JQuery为该事件处理程序提供了一个快捷方式，因为它被大量使用

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

---

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

我强烈建议大家看看，但对于初学者来说，这可能是一个令人望而生畏的框架。如果你还没学，我肯定会先学。许多其他框架要么直接构建在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>

如果将代码放在该事件处理程序中，则可以将脚本标记放在页面上的任何位置，甚至是

中。JQuery为该事件处理程序提供了一个快捷方式，因为它被大量使用

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

---

---

你肯定会喜欢AJAX请求。你肯定会喜欢AJAX请求。这对我很有用。为了确认，我想我应该向“”发送一些带有“数据”的密钥，以便在服务器端我只响应与我的密钥匹配的密钥，以防止欺诈呼叫，是吗？：）我不知道你的意思。AJAX请求（从服务器的角度来看）与传统的表单提交没有什么不同。唯一的区别是浏览器不会向服务器发出完整请求，而是在后台发出AJAX请求。谢谢。我的意思是，我想有些人也可以通过我们的提交url将数据保存到数据库中，而不必访问网站，如果我得到的信息正确的话。我们必须避免还是自动处理？Web安全是一个完全不同的话题XD。简短的回答是“不，AJAX不会引入任何您使用的经典表单提交样式所没有的安全漏洞。”长的回答是“是的，任何人都可以向您的端点发出请求，您会想了解所有内容。”感谢您提供的精彩回答和资源。这对我来说很有用。为了确认，我想我应该向“”发送一些带有“数据”的密钥，以便在服务器端我只响应与我的密钥匹配的密钥，以防止欺诈呼叫，是吗？：）我不知道你的意思。AJAX请求（从服务器的角度来看）与传统的表单提交没有什么不同。唯一的区别是浏览器不会向服务器发出完整请求，而是在后台发出AJAX请求。谢谢。我的意思是，我想有些人也可以通过我们的提交url将数据保存到数据库中，而不必访问网站，如果我得到的信息正确的话。我们必须避免还是自动处理？Web安全是一个完全不同的话题XD。简短的回答是“不，AJAX不会引入任何您使用的经典表单提交样式所没有的安全漏洞。”长的回答是“是的，任何人都可以向您的端点发出请求，您希望了解所有这些。”感谢您提供的精彩答案和参考资料。在这种应用程序中使用web Socket而不是ajax是一个好主意吗？@AlexStack您完全可以使用WebSocket而不是传统的ajax请求，但作为初学者，我强烈建议在深入研究WebSocket之前学习所有关于ajax/XHR的知识。谢谢@IvanJ。有道理。我的信息是，如果我们使用websockets，它会提高性能吗？不是真的，不会。如果你在实时地做一些事情，比如聊天应用程序，那么这很重要。@Ivan讲得通。感谢您的回答。在这种应用程序中使用web Socket而不是ajax是一个好主意吗？@AlexStack您完全可以使用WebSocket而不是传统的ajax请求，但作为初学者，我强烈建议在深入研究WebSocket之前先学习所有关于ajax/XHR的知识。谢谢@IvanJ。有道理。我的信息是，如果我们使用websockets，它会提高性能吗？不，不会。如果您使用的是som