使用 ajax 在不刷新站点的情况下更改 mongoDB 中的某些项目

Posted 2023-03-11

【中文标题】使用 ajax 在不刷新站点的情况下更改 mongoDB 中的某些项目

【英文标题】：Working with ajax to change some items in mongoDB without refreshing the site

【发布时间】：2019-10-14 10:22:31

【问题描述】：

我有“订单页面”，其中应该显示订单，并且可以使用 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);
        
    );
  );

因此，网站应该通过单击按钮将 mongoDB 中的“isConfirmed”等订单参数从 false 更新为 true，而无需重新加载。此外，所有订单都应该出现在网站上，而无需重新加载。

【问题讨论】：

我知道它必须在 'success' 中有一些代码，但是我需要在那里写什么来更新订单？

您的代码有什么问题？您是否遇到错误，是否未保存数据等。

所以页面上基本上有几个部分。 “等待确认订单”“待定订单”“已完成订单”，当单击按钮时，它应该将订单替换到新部分，但直到我重新加载页面才会发生这种情况

【参考方案1】：

您需要使用 ajax 调用的 success: function(someVar) 部分。这会告诉您的代码在调用后应该做什么，并且您从路由传递的任何上下文都可以通过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。

【讨论】：

但是我需要在成功函数中改变的只是订单值从“isConfirmed = false”到“isConfirmed = true”。我不需要更改 html 本身的任何内容，因为它根据订单值使用 .ejs 呈现