我在一个应用程序上显示了不同的卡,这些信息循环地从数据库中获取。如果用户只能使用一次,则可以选择在卡片上放置“兑换按钮”。当用户单击兑换按钮时,我将在数据库中获取信息(卡名,clientID)。然后,我进行了另一个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,这意味着当我尝试进行控制台登录时,促销的ID为0,而不是实际的数字,所以忘记了所提供卡片的信息,不知道要删除什么。
实现删除卡片的最佳方法是什么?我也需要在点击事件中执行此操作吗?如果可以,我可以在同一函数中进行2个Ajax调用吗?
答案 0 :(得分:1)
如果您更改方法,则可以更轻松地实现这一目标。当您发送删除该项目的请求或兑换代码时,成功返回相同的数据,并且在某些情况下,只需从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.
}
});