javascript - 点击mysql按钮后隐藏div

Question

我想在单击按钮后隐藏“div”。我不想使用 .remove() 因为当您刷新应用程序时它会回来。我在数据库中有关于这个 div 的信息，我想使用它。

我已经尝试创建一个 Ajax 调用来选择我正在查看的信息，然后在前端告诉它是否存在，然后将其删除。但我觉得我错过了一些东西，我不知道为什么。

前端:

$('#deletePromo').on('click', function(res){
    let success = function(res){
        if (eventName && customerID){
            $(`#promotion-container .promo${i}`).remove();
        }
    }

    $.ajax({
            type: 'POST',
            url: '/api/promotions-done',
            crossDomain: true,
            //success: success,
            dataType: 'json',
            data: {
                customerID : customerID,
                eventName : eventName,
            }
        }).done(function(res){
            console.log('res', res)
            if (res != null){
                $(`#promotion-container .promo${i}`).remove();
                //$(`#promotion-container .promo${i}`).css('display', 'none')
            }
        })
        })
})

后端:

router.post('/promotions-done', function(req, res) {
  let customerID = req.user.customer_id
  let restaurantGroupId = req.user.restaurant_group_id
  let eventName = req.body.eventName

  db.task(t => {
      return t.any(`SELECT * FROM promotions_redemption WHERE (customer_id = '${customerID}' AND event_name = '${eventName}' AND restaurant_group_id = ${restaurantGroupId})`).then(function(promotionsDone) {
        return res.json({'promotionsDone': promotionsDone})
      })
      .catch((err) =>{
        console.log(err)
      })
    })
})

我在这里想做的是，如果表中已经存在 customerID 和 eventName，则从该人中删除 div。我没有太多使用后端的经验，所以有没有办法告诉程序检查数据库中的此信息，如果存在，则删除该 div。

Answer 1

您可能在模板文件或数据库中有一些 HTML，其中有可以启动的按钮。由于您的 AJAX 代码仅在单击按钮时运行，因此您需要执行以下两件事之一:

1. 在页面加载时添加 AJAX 调用
2. 处理查找按钮并在模板语言/平台(例如 asp.net、python django、php laravel 等)中隐藏/显示它，以避免 AJAX 请求。

由于我们不了解您的平台，我将向您展示选项 1

首先，我将更改 HTML 的初始状态，使其默认不显示该按钮。这看起来像这样:

<div id="promotion-container">
    <button class="promo" style="display: none" />
</div>

否则，按钮将按照 AJAX 请求所花费的时间显示。

接下来，您需要将此函数调用添加到页面。我已在完成功能中反转登录以“显示”按钮或取消隐藏它。

$(document).ready(function(){
    let success = function(res){
        if (eventName && customerID){
            $(`#promotion-container .promo${i}`).remove();
        }
    }

    $.ajax({
            type: 'POST',
            url: '/api/promotions-done',
            crossDomain: true,
            //success: success,
            dataType: 'json',
            data: {
                customerID : customerID,
                eventName : eventName,
            }
        }).done(function(res){
            console.log('res', res)
            if (res === null){
                //$(`#promotion-container .promo${i}`).remove();
                $(`#promotion-container .promo${i}`).css('display', 'block')
            }
        })
        })
})