如何使用 Django rest 框架删除选定的购物车项目？

Question

我使用 Django 作为后端，PostgresSQL 作为 DB 和 HTML，CSS 和 Javascript 作为前端

我在 Javascript 的帮助下调用 Django API 以将购物车项目显示给经过身份验证的user

serializer.py

from .models import *
from rest_framework import serializers

class productserializers(serializers.ModelSerializer):
    class Meta:
        model = Cart
        fields = '__all__'
        depth = 1

views.py

@api_view(['GET'])
def showproduct(request):
    if request.method == 'GET':
        result = Cart.objects.filter(user = request.user)
        serialize = productserializers(result, many = True)
        return Response(serialize.data)

ma​​in.js

$(document).ready(function() {
    $.ajax({
      url: 'http://127.0.0.1:8000/showdata',
      dataType: 'JSON',
      success: function(data){
        for (var i = 0; i < data.length; i++)
        {
          var row = 
          $('<tr><td style="font-style:bold">'
          +data[i].product.name+'</td><td style="font-style:bold">'
          +data[i].product.price+'</td><td><a href='
          +data[i].product.link_href+'><button type="button" class="btn btn-outline-success">Buy</button></a></td><td><a href='#'><button type="button" class="btn btn-outline-danger">DELETE</button></a></td></tr>');
          $("#tableProduct").append(row);
        }
      }
    });
});

好吧，从上面的代码 main.js

...
<td><a href='#'><button type="button" class="btn btn-outline-danger">DELETE</button></a></td>
...

在这一行我想实现删除功能。用户可以从购物车中删除所选商品的位置。那么，如何实现删除功能，从购物车中删除商品并在模板中显示响应。

这是我在 DJANGO ADMINISTRATION 中添加购物车项目的方式。

view.py

def addProduct(request):
    user = request.user
    product_id = request.GET.get('product_id')
    product_cart = Product.objects.get(id=product_id)
    Cart(user=user, product=product_cart).save()
    return render(request, 'cart/addtocart.html')

编辑 1

<script>
  $(document).ready(function() {
    $.ajax({
      url: 'http://127.0.0.1:8000/showdata ',
      dataType: 'JSON',
      success: function(data){
        for (var i = 0; i < data.length; i++)
        {
          var row = 
          $('<tr><td style="font-style:bold">'
          +data[i].product.name+'</td><td style="font-style:bold">'
          +data[i].product.price+'</td><td><a href='
          +data[i].product.link_href+'><button type="button" class="btn btn-outline-success">Buy</button></a></td><td><button onclick="destoryCart('+data[i].product.id+')" type="button" class="btn btn-outline-danger">DELETE</button></td></tr>');
          $("#tablebuild").append(row);
        }
     
      }
    });
});

const destoryCart = (id) => {
  let url = `{% url 'main:cart_destroy' ${id} %}`
  $.ajax({
      beforeSend: function(xhr){xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}');},
      url: url,
      type: 'DELETE',
      success: (data) => {
          console.log("deleted!")
      },
      error: (err) => {
          console.log(err);
      }
  });
} 
</script>  

urls.py

path('cart_destroy/', views.CartDestroyAPIView.as_view(), name ='cart_destroy'),

views.py

class CartDestroyAPIView(DestroyAPIView): # DeleteView
    permission_classes = [IsAuthenticated] # Or anything else you want
    authentication_classes = [SessionAuthentication]  # Or anything else you want
    serializer_class = productserializers
    queryset = Cart.objects.all() 

Answer 1

这是删除卡片的方法：

class CartDestroyAPIView(DestroyAPIView): # DeleteView
"""
Cart Destroy API View
"""
permission_classes = [IsAuthenticated] # Or anything else you want
authentication_classes = [SessionAuthentication]  # Or anything else you want
serializer_class = productserializers
queryset = Cart.objects.all()   

对于 JS 部分，您可以创建一个获取 id 并向您的 CartDestroyAPIView 端点发送删除请求的函数：

const destoryCart = (id) => {

    let url = `your end point/${id}`; 


    $.ajax({
        beforeSend: function(xhr){xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}');},
        url: url,
        type: 'DELETE',
        success: (data) => {
            console.log("deleted!")
        },
        error: (err) => {
            console.log(err);
        }
    });

}  

现在，当您在 ajax 调用的 success 中创建购物车列表时，您可以使用删除按钮执行此操作：

`<td>
     <button onclick="destoryCart(${cart.id})" type="button" class="btn btn-outline-danger">
        DELETE
     </button>
 </td>`   

你的情况是这样的：

$(document).ready(function() {
$.ajax({
  url: 'http://127.0.0.1:8000/showdata',
  dataType: 'JSON',
  success: function(data){
    for (var i = 0; i < data.length; i++)
    {
      var row = 
      $('<tr><td style="font-style:bold">'
      +data[i].product.name+'</td><td style="font-style:bold">'
      +data[i].product.price+'</td><td><a href='
      +data[i].product.link_href+'><button type="button" class="btn btn-outline-success">Buy</button></a></td><td><button onclick="destoryCart('+data[i].product.id+')" type="button" class="btn btn-outline-danger">DELETE</button></td></tr>');
      $("#tableProduct").append(row);
    }
  }
});

});

如果您在 .js 文件中编写 js，则无法像这样获得 csrf_token，而是可以使用 this。
提示：时间>
当你想在 js 中的字符串中使用你的变量时，你反引号（`）

let name = "John";
console.log(`My name is ${name}`);

Answer 2

def delete_cart_item(request):
    cart_item_id = request.GET.get('cart_item_id')
    CartItem.objects.filter(cart__user=rquest.user.id,id=cart_item_id)
    return render(request, your template)