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，该HTML的开头是按钮。由于您的AJAX代码仅在单击按钮时才能运行，因此您需要执行以下2件事之一：

在页面加载时添加AJAX调用
处理该按钮，并以您的模板语言/平台（如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')
            }
        })
        })
})

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。另外，您可能需要根据在页面上创建customerId的时间来修改Cookies的设置位置。~~

编辑：

您可以通过两种方式以描述的方式运行查询，但两种方式都无法使用，除非您使用会话cookie。

1）您在查询中有res.render。

这将确保div永远不会显示给已经单击过该用户的用户，但会严重损害您网站的性能。该查询将在每次呈现页面时运行，无论客户端是否具有customerId。您的网站将因大量流量而缓慢地前进。

2）您通过带有ajax的客户端js运行POST请求，并将customerId与您的数据库进行比较；如果找到结果，则删除div。

这将按您希望的方式运行，并且不会影响性能，但是没有什么阻止客户使用burp之类的东西来拦截POST请求。他们可以将data参数更改为所需的值，并确保div为他们加载。

我看到的这些问题的唯一解决方案是，当用户单击带有会话cookie的服务器上的div AND时，对他们进行验证。（为进行用户验证，我使用passport和express-session）。

我可以向您展示如何进行设置，但是要使其针对您的特定需求，我需要进一步了解您的网站设置方式。

PS，我误解了为什么您需要隐藏div，而事后看来，使用客户端cookie是一个可怕的主意。

用mysql单击按钮后隐藏div

2 个答案:

编辑：