更新HTML页面的一部分，而无需使用expressJs nodeJs Handlebars重新加载页面

Question

我有以下快递应用程序，仅呈现ecommerce.hbs页面。在该页面上，我有一个部分是``待办事项列表''部分，它显示了带有复选框的四到五个任务。当我更改复选框时，附加脚本运行并将更改后的复选框的ID发送到路由文件，在该文件中我已获得ID并运行循环以将值从true更改为false并将false更改为true。我拥有控制台值，单击复选框后返回正确的值，但我坚持发送数据返回到“待办事项列表”部分的ecommerce.hbs页面。如何在不重新加载页面的情况下将数据发送回ecommerce.hbs页面。

ecommerce.js（路由）

router.get('/ecommerce', function(req, res, next) {
  res.render('ecommerce', { 
        layout:'main',
      data: data
    });
});

router.post('/ecommerce', (req, res) => {
   var id = req.body.id;
   //console.log(req.body.id)
   res.json({
      success: true
   });
   for (var i=0; i<data.todo.length; i++){
      if(data.todo[i]['id'] == id){
         data.todo[i]['completed'] = !data.todo[i]['completed'];
         //console.log(data.todo[i]['completed']);
      }
   }
});  

ecommerce.hbs文件

 {{#toDoList data.todo}}
      {{> widgets/toDoList}}
 {{/toDoList}}

toDoList部分

<input type="checkbox" name="task" id="{{id}}" autocomplete="off" checked="" onchange="return onToDochange(this)">

更改脚本

function onToDochange(event) {
   //console.log(event.id);
   $.ajax({
      url: "/ecommerce",
      method: 'POST',
      headers: {
         'Accept': 'application/json',
      },
      data: {
         id : event.id
      },
      body: JSON.stringify({"id": event.id})
   })
   .done(function( data ) {
      console.log( "Sample of data:", data );
    });
  };

谢谢！