Обновите часть HTML-страницы, не перезагружая страницу, используя handJar - PullRequest
Новая
       5

Обновите часть HTML-страницы, не перезагружая страницу, используя handJar

0 голосов
/ 21 сентября 2018

У меня есть следующее экспресс-приложение, которое просто отображает страницу ecommerce.hbs. На этой странице у меня есть один раздел, в котором есть раздел «Список дел», и он показывает четыре-пять задач с флажком. Когда я изменяю флажок, запускается прикрепленный скрипт иотправить идентификатор измененного флажка в файл маршрутизации, где у меня есть идентификатор и цикл выполнения, чтобы изменить значение с 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 );
    });
  };

Спасибо !!

...