如何使用 django、ajax、jQuery 刷新页面而不重新加载？

Question

我试图从购物车中删除产品而不刷新整个页面，我可以删除一个项目，然后我需要重新加载页面以删除另一个项目。在解决类似性质的问题后，我使用 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'])})

这是我的 function.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');
            }
        })
    })
})

能够在不刷新页面的情况下删除购物车中的下一个商品

Answer 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

元素，解决由于事件侦听器丢失而必须刷新的问题？

参考：

• https://api.jquery.com/on/#on-events-selector-data-handler