隐藏DIV点击按钮与MySQL后，

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)
      })
    })
})

我想在这里做的是说，如果在客户和eventName的桌子上已经存在，然后从身上取出股利。我没有与后端工作经验，很多这样有没有办法告诉程序来检查数据库的信息，如果它存在然后取出股利。

Answer 1

你可能有一个模板文件中的一些HTML，或在具有有按钮启动与数据库。由于您的AJAX代码单击按钮时才会运行，你需要做任何的1 2两件事：

1. 添加在页面加载AJAX调用
2. 手柄寻找键和隐藏/显示它在你的模板语言/平台（认为asp.net，蟒蛇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')
            }
        })
        })
})

Answer 2

您的问题，最简单的方法是使用一个客户端cookie。如果你没有一个cookie包了，我建议你js-cookie。

在你的HTML页面：

<div id="promotion-container" hidden> //you want it hidden by default
//if it is shown by default there will be an annoying screen flicker when the pages loads

<script src="/path/to/js.cookie.js"></script>

jQuery的页面：

$(document).ready( function() {
    if (!Cookies.get('name1') || !Cookies.get('name2')) {
       $('#promotion-container').show();
    };

    Cookies.set('name1', customerId, {expires:14} ); //must include expiration else the cookie will expire when the browser closes.
    Cookies.set('name2', eventName, {expires:14} ); //you might need to make an eventId if eventName is too large       
});

对于Cookies.set第二输入是Cookie的'value'。如果'value' = null，然后Cookies.get('name') = null。

这是假设你已经设置customerId和eventName每个用户的手段。您可能还需要修改，其中Cookies是基于当页面上创建在客户上设置。

编辑：

有2种方式，你可以运行一个查询你所描述的方式，这两者他们的方式你想除非你使用一个会话cookie将无法正常工作。

1）您res.render查询内。

这将确保div永远不会显示给已点击它的用户，但会显著伤害你的网站的性能。查询将运行在每次呈现页面时，无论客户是否有一个客户ID。您的网站将是一个大的交通量十分缓慢。

2）在运行通过客户端JS用AJAX POST请求，并与你的数据库进行比较在客户;如果结果发现，删除的股利。

这工作，你希望它的方式，而不会影响性能，但没有什么是使用像burp东西拦截POST请求停止客户。他们可以在数据参数更改为任何他们想要的，并确保DIV负载他们。

解决这些问题的唯一解决方案，我看到的将是验证用户当他们点击div和一个会话cookie在服务器上。 （用于用户验证我使用passport和express-session）。

我可以告诉你我是如何设置的，而是使之具体到您的需求，我需要更多地了解你的网站是如何设置。

PS我误解你为什么需要隐藏的股利，并使用客户端cookie会在事后一个可怕的想法。