提问人:Harshaan Niles 提问时间:10/18/2023 最后编辑:marc_sHarshaan Niles 更新时间:10/19/2023 访问量:44
如何使用 django、ajax、jQuery 在不重新加载的情况下刷新页面?
how to refresh the page without reloading, using django, ajax, jQuery?
问:
我正在尝试在不刷新整个页面的情况下从购物车中删除产品,我可以删除一个项目,然后我需要重新加载页面以删除另一个项目。在经历了类似性质的问题后,我正在使用 Django、jQuery 和 AJAX 来获得预期的结果。在另一个分支中,我实现了自动刷新功能,删除后页面会自动重新加载,但这不是很好的用户体验。
任何帮助将不胜感激。
这是我 views.py 从购物车中删除商品的功能
def delete_item_from_cart(request):
cart_total_amt = 0
product_id = str(request.GET['id'])
if 'cart_data_obj' in request.session:
if product_id in request.session['cart_data_obj']:
cart_data = request.session['cart_data_obj']
del request.session['cart_data_obj'][product_id]
request.session['cart_data_obj'] = cart_data
if 'cart_data_obj' in request.session:
for p_id, item in request.session['cart_data_obj'].items():
cart_total_amt += int(item['qty']) * float(item['price'])
context = render_to_string("core/async/cart-list.html", {"cart_data":request.session['cart_data_obj'], 'totalCartItems':len(request.session['cart_data_obj']), 'cart_total_amount':cart_total_amt})
return JsonResponse({"data":context, "totalCartItems":len(request.session['cart_data_obj'])})
这是我的函数.js实现
$(document).ready(function(){
$(".delete-product").on("click", function(){
let product_id = $(this).attr("data-product")
let this_val = $(this)
console.log(product_id);
console.log(this_val);
$.ajax({
url:'/delete-from-cart',
data:{
'id':product_id
},
dataType: 'json',
beforeSend: function(){
console.log("IN before send");
this_val.hide()
console.log("IN after send");
},
success: function(response){
console.log("Starting success");
this_val.show()
$("#cart-items-count").text(response.totalCartItems)
$("#cart-list").html(response.data)
console.log("successfully removed");
},
error: function(response){
alert('error');
}
})
})
})
能够在不刷新页面的情况下删除购物车中的下一件商品
答:
2赞
jm-nab
10/18/2023
#1
您可以尝试通过事件委托将事件侦听器附加到 DOM 的更高位置,它会将单个事件侦听器附加到父元素,然后针对任何现有或未来的元素运行:.data-product
$(document).ready(function(){
// for example
$("#cart-list").on("click", ".delete-product", function() {
// same code here
})
})
通过将单击事件侦听器附加到 并将选择器添加到任何新元素,解决由于事件侦听器丢失而必须刷新的问题,这可能会有所帮助?#cart-list
.delete-product
.delete-product
参考:
评论