如何使用 Javascript 從 DB 和 Django API 視圖中刪除對象（Django Z50780F47F6839D47D60BC455FZ）

Question

我使用 Django 作為后端，使用 PostgresSQL 作為 DB，並使用 HTML、CSS、Z9E13B69D1D2DAACA93771 作為前端。

我正在使用 Django Rest 框架來顯示購物車中的所有產品，現在我在刪除這些特定產品時遇到了困難。 我正在使用 Javascript 來顯示用戶選擇的產品的所有詳細信息。 這是代碼：

視圖.py

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

現在是 Javascript 代碼，我在其中調用 Django API

索引.html

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

現在index.html中的上述代碼，有一個垃圾按鈕，我想在其中add code以刪除 object 通過 Django ZDB14423871843ADE 中的 object。 怎么做？

已編輯

views.py（添加到購物車功能）

class AddToCartView(TemplateView):
    template_name = "status.html"

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        # get product id from requested url
        processor_id = self.kwargs['proc_id']
        # get product
        processor_obj = Processor.objects.get(id=processor_id)

        # check if cart exists
        cart_id = self.request.session.get("cart_id", None)
        if cart_id:
            cart_obj = Cart.objects.get(id=cart_id)
            this_product_in_cart = cart_obj.cartproduct_set.filter(processor=processor_obj)

            # item already exists in cart
            if this_product_in_cart.exists():
                cartproduct = this_product_in_cart.last()
                cartproduct.quantity += 1
                cartproduct.subtotal += processor_obj.price
                cartproduct.save()
                cart_obj.total += processor_obj.price
                cart_obj.save()
            # new item is added in cart
            else:
                cartproduct = CartProduct.objects.create(
                    cart=cart_obj, processor=processor_obj, rate=processor_obj.price, quantity=1, subtotal=processor_obj.price)
                cart_obj.total += processor_obj.price
                cart_obj.save()

        else:
            cart_obj = Cart.objects.create(total=0)
            self.request.session['cart_id'] = cart_obj.id
            cartproduct = CartProduct.objects.create(
                cart=cart_obj, processor=processor_obj, rate=processor_obj.price, quantity=1, subtotal=processor_obj.price)
            cart_obj.total += processor_obj.price
            cart_obj.save()

        return context

Answer 1

@api_view(['DELETE'])
def showproduct(request):
    if request.method == 'DELETE':
        # I assume each cartProduct has an id
        # Aslo when you click the trash button you send a delete request to the API
        # You send the product_id with the request
        try:
            result = CartProduct.objects.get(id=requests.product_id)
        except ObjectDoesNotExist:
            return Response(status=status.HTTP_404_NOT_FOUND)
        result.delete()
        return Response(status=status.HTTP_204_NO_CONTENT)

要使一切正常工作，還需要很多其他的東西。 簡而言之，您將需要類似以下代碼的內容。

您必須為刪除請求再次調用 Ajax。 您必須設置刪除按鈕，以便它可以接受ajax調用。 還需要修正URL

<script>
  $(document).ready(function(){
    $('#delete').submit.function(e){
      e.preventDefault();
      var product_id = {{ cartProduct.id }}
      $.ajax({
        type: 'POST',
        url: 'http://127.0.0.1:8000/index/', + product_id,
        headers: {'X_METHODOVERRIDE': 'DELETE'}
      });
    });
  });
</script>