时间戳

首页 > 解决方案 > 使用 AJAX 记住单击按钮的状态

javascript - 使用 AJAX 记住单击按钮的状态

问题描述

我在应用程序上显示了不同的卡片，信息来自循环的数据库。如果用户只能使用一次，我可以选择在卡片上放置“兑换按钮”。当用户单击兑换按钮时，我会在数据库中获取信息（卡名、客户端 ID）。然后，我进行了另一个 AJAX 调用以从数据库中获取信息，我想要检查 clientID 和 carndame 是否已经在数据库中，然后仅为该用户删除它。我不想使用 localStorage 或 cookie，因为如果用户删除 cookie，他们会再次看到卡片，我不希望这种情况发生。

-- AJAX 调用发布 --

$(`#promotion-container .promo${i} .redddButt`).click(function(e){
    e.stopPropagation();
    var esc = $.Event("keyup", { keyCode: 27 });
    $(document).trigger(esc);

    $('#deletePromo').on('click', function(){
        if (eventName && customerID)
        $(`#promotion-container .promo${i}`).remove() // this removes it but if you reload the page it appears again.
    })

    $('#just-claimed-popup2').addClass('reveal');
    var theDiv = document.getElementById("card-just-claimed");
    var content = document.createTextNode(eventName);
    theDiv.appendChild(content);

    $.ajax({
        type: 'POST',
        url: '/api/promotions_redemption',
        crossDomain: true,
        dataType: 'json',
        data: {
            eventName : eventName,
            dateReedem : dateReedem,
        }
    });
})

--AJAX 调用从数据库获取信息 --

let success = function(res, eventName) {
    let cardData = res['cardData'] //cardData is the info from database

    for(i=0; i<cardData.length; i++){
        let nameEvent = cardData[i]['event_name']
        let customerID = cardData[i]['customer_id']
        let clicked_button = cardData[i]['clicked_button']

        let eventName1 = promotions['event_name'] // getting the names of all cards displayed

        if(customerID && nameEvent == eventName1){
            $(`#promotion-container .promo${i}`).remove(); // HERES THE PROBLEM
        }
}
}

$.ajax({
    type: 'GET',
    url: '/api/promotions-check',
    crossDomain: true,
    dataType: 'json',
    success: success,
});

问题是我的 GET 调用条件是成功的，但它忘记了卡的 id，这意味着当我尝试 console.log 时，促销的 id 为 0，而不是实际数字，所以它忘记了呈现的卡片信息，不知道要删除什么。

实现卡被删除的最佳方法是什么？我也需要在点击事件中这样做吗？如果是，我可以在同一个函数中有 2 个 Ajax 调用吗？

标签： javascriptnode.jsajaxpostgresql

解决方案

如果您更改方法，您将能够更轻松地实现这一目标。当您发送发布请求以删除该项目或兑换您的案例中的代码时，成功后返回相同的数据，并且在某些情况下只需从 DOM 中删除该项目。在页面加载时，不应加载已兑换的任何内容。

我个人认为没有必要再GET删除已兑换的代码。

$.ajax({
        type: 'POST',
        url: '/api/promotions_redemption',
        crossDomain: true,
        dataType: 'json',
        data: {
            eventName : eventName,
            dateReedem : dateReedem,
        },
        success: function(result){
        //on success, ie when the item is deleted -> delete from the DOM. 
        }
    });

推荐阅读