如果我有很多按钮，Django 如何知道点击了哪个按钮？

Question

对于一个在线购物网站，我有很多产品，每个产品都包含一个添加到购物车按钮，我想知道点击了哪个按钮以了解哪个产品与该按钮相关。我是 Django 和前端的新手，所以我认为这很常见，但我不知道那是什么，应该是 javascript?

<div class="row">
    {% for product in products %}
        <div class="col-lg-4">
        <img alt="" class="thumbnail" src="{{ product.images.all.0.image.url }}">
            <div class="box-element product">
                <h5><strong>{{ product.name }}</strong></h5>
                <hr>
                <button class="btn btn-outline-secondary add-btn"> Add to cart</button>
                <a class="btn btn-outline-success" href="{% url 'detail' %}"> View</a>
                <h4 style=" float: right"><strong>{{ product.price }}</strong></h4>
            </div>
        </div>
    {% endfor %}
</div>

Answer 1

每个模型（在本例中为产品）都有一个与之相关的唯一 id 字段，如果您没有明确提及模型的主键，Django 会在模型迁移时自动创建该字段。在这种情况下，您将需要 javascript 和监听添加到购物车按钮单击 event.Below 的事件处理程序是您可以实现此目的的一些步骤，我知道这些是一些繁琐的事情，但请尝试一下。

1.创建一个 javascript cart.js：这将为每个添加到购物车按钮的点击事件添加事件监听器。

var updateBtns = document.getElementsByClassName('update-cart') //get all add to cart button with class update-cart

for (i = 0; i < updateBtns.length; i++) { //iterate all add button to add eventlistener
    updateBtns[i].addEventListener('click', function(){ //add eventlistener click for each button and set a function which will be executed on click
        var productId = this.dataset.product //get product id from attribute product set in html
        var action = this.dataset.action    //get action based on which you can handle remove or add to cart conditions
        console.log('productId:', productId, 'Action:', action)
        updateUserOrder(productId, action) // this function will be called and will pass product id and action in body to your view for further processing.
    })
}


function updateUserOrder(productId, action){ // this function will actually be called when someone click on add to cart button and view will be invoked
        var url = '/update_item/' // setting the url to be called

        fetch(url, {      //here we are using post request to post id of product and other details to our view
            method:'POST',
            headers:{
                'Content-Type':'application/json',
                'X-CSRFToken':csrftoken,
            }, 
            body:JSON.stringify({'productId':productId, 'action':action})
        })
        .then((response) => {
           return response.json();
        })
        .then((data) => {
            location.reload()
        });
}

2。在 html 中包含 javascript:

<script type="text/javascript" src="{% static 'js/cart.js' %}"></script>

3.Adding 您 htm 中 add_to_cart 按钮的事件处理程序，因此无论何时单击它，您都必须执行添加功能。为此，您需要做的第一件事是添加一个 class“更新购物车”以添加按钮，我们将通过该按钮识别页面上的添加按钮那么你需要通过设置数据来自定义一些属性——在这种情况下它将是 product 其值将是特定产品的 id，如 data-product="{{product.id}}" 并添加一个 action 属性以让我们知道此按钮何时单击我们需要将产品添加到购物车，如 data-action="add"。所以现在 html 中的按钮代码看起来像这样：

<button data-product="{{product.id}}" data-action="add" class="update-cart">Add to Cart</button>

4.Create 相应的视图名称 'update_item' 每当单击添加按钮时都会从 javascript 调用并将项目添加到购物车

def updateItem(request):
    data = json.loads(request.body)
    productId = data['productId']
    action = data['action']
    print('Action:', action)
    print('Product:', productId)
    product = Product.objects.get(id=productId) # get product with selected id from database 
    #rest here add your logic for adding specific product to cart

5.创建一个路由到名为 update_item:

的 updateItem 视图

path('update_item/', views.updateItem, name="update_item"),

如果我有很多按钮，Django 如何知道点击了哪个按钮？

Django how to know which button is clicked in case I have many buttons?

html

django

button