Работа с ajax для изменения некоторых элементов в mongoDB без обновления сайта - PullRequest
Новая
       24

Работа с ajax для изменения некоторых элементов в mongoDB без обновления сайта

0 голосов
/ 28 мая 2019

У меня есть «страница заказов», где должны появляться заказы, которые можно изменить с помощью ajax без перезагрузки страницы. Как мне сделать это, чтобы изменить конкретный логический в mongoDB нажатием кнопки? Также мне нужно обновлять страницу каждый раз, когда появляется новый заказ без перезагрузки страницы.

Отлично работает с перезагрузкой страницы с маршрутизацией, но мне нужен AJAX.

script.js 

  $('.confirm').click(function(){
    event.preventDefault();
    event.stopPropagation();
    $.ajax({
      url: 'order/' + $(this).attr('data-id') + '/confirm',
      type: 'POST',
      contentType: 'application/json',
      success: function(){
      }
  });
});

index.ejs 

<form class="confirm" data-id="<%= order.id %>" method="POST">
  <button class="btn btn-success btn-lg" type="submit"><i class="fas fa-check"></i> Priimti</button>
</form>

orders.js 

router.post('/order/:id/confirm', isLoggedIn, function(req, res){
      Order.findOneAndUpdate({_id: (req.params.id)}, { $set: { isConfirmed: true, isDone: false } }, { returnOriginal: false }, (err, result) => {
        if (err){
          console.log(err);
        }
    });
  });

Таким образом, сайт должен обновлять параметры заказов, такие как isConfirmed, с false на true в mongoDB одним нажатием кнопки без перезагрузки. Также ВСЕ заказы должны появляться на сайте без перезагрузки.

1 Ответ

0 голосов
/ 29 мая 2019

Вам необходимо использовать success: function(someVar) часть вашего вызова ajax. Это сообщает вашему коду, что он должен делать после выполнения вызова, и любой контекст, который вы передадите со своего маршрута, будет доступен через someVar. Например:

при условии, что ваш index.html выглядит следующим образом, и что вы используете jQuery: 

  $.ajax({
  url: 'order/' + $(this).attr('data-id') + '/confirm',
  type: 'POST',
  contentType: 'application/json',
  success: function(data){
      //code to change the html of "someDiv"
      $('#someDiv').html(data['someData']);
  }

С другой стороны, я бы рекомендовал всегда передавать e в ваши функции вместо вызова event.preventDefault(), потому что event сам по себе иногда не работает в Firefox. Например: 

$('.confirm').click(function(e){
  e.preventDefault();
...

Наконец, я не думаю, что вам нужен event.stopPropagation.

...