Блог

У меня есть небольшой проект, в котором я создал API, и он передает интерфейс через ajax. Все остальные функции CRUD работают отдельно от ОБНОВЛЕНИЯ. Когда я использую Postman, API ОБНОВЛЕНИЯ работает идеально. Так что я предполагаю, что проблема на стороне ajax. Я безуспешно искал решение. Некоторая помощь в этом была бы весьма признательна.

Моя модель

 from django.db import models

CATEGORY = [
    ('Electronics', ('Electronics')),
    ('Furniture', ('Furniture')),
    ('Toys', ('Toys')),
    ('Hardware', ('Hardware')),
    ('Medicine', ('Medicine')),
    ('Groceries', ('Groceries'))
]

# Create your models here.
class Products(models.Model):
    name = models.CharField(max_length=100)
    category = models.CharField(max_length=100, choices=CATEGORY)
    quantity = models.IntegerField()
    price = models.DecimalField(decimal_places=2, max_digits=6)

    def __str__(self):
        return self.name

    class Meta:
        verbose_name_plural = "Products"
 

Мой сериализатор

 from .models import Products
from rest_framework import serializers

class ProductSerializer(serializers.ModelSerializer):
    class Meta:
        model = Products
        fields = '__all__'
 

Вот мой API ОБНОВЛЕНИЯ

 @api_view(['PUT'])
def EditProductAPI(request, id):
    product = Products.objects.get(id=id)
    serializer = ProductSerializer(instance=product, data=request.data)
    if serializer.is_valid():
        serializer.save()
        return Response(serializer.data, status=status.HTTP_201_CREATED)

    return Response(serializer.errors, status=status.HTTP_304_NOT_MODIFIED)
 

Мое Обновление От

 <!-- Edit Product Modal -->
    <div class="container">
        <div class="modal fade" id="editProduct" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Product</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">amp;times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                        <form id="editProduct" action="">
                            {% csrf_token %}
                            <input type="hidden" id="Myid" value="">
                            <div class="form-group mb-3">
                            <label for="p-name">Product Name</label>
                            <input type="text" class="form-control" id="p-name" name="name" placeholder="Product Name" required>
                            </div>
                            <div class="form-group mb-3">
                                <label for="p-category">Category</label>
                                <select class="form-control form-select" aria-placeholder="Category" id="p-category" name="category" required>
                                    <option selected disabled>Category</option>
                                    <option value="Electronics">Electronics</option>
                                    <option value="Furniture">Furniture</option>
                                    <option value="Toys">Toys</option>
                                    <option value="Hardware">Hardware</option>
                                    <option value="Medicine">Medicine</option>
                                    <option value="Groceries">Groceries</option>
                                </select>
                            </div>
                            <div class="form-group mb-3">
                                <label for="p-quantity">Quantity</label>
                                <input type="number" class="form-control" id="p-quantity" name="quantity" placeholder="Quantity" required>
                            </div>
                            <div class="form-group mb-3">
                                <label for="p-price">Price</label>
                                <input type="number" class="form-control" id="p-price" name="price" placeholder="Price" required>
                            </div>
                            <div class="d-grid gap-2">
                                <button type="button" class="btn btn-primary btn-sm" id="p-edit">Save changes</button>
                                <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
 

My Update AJAX code

 //Save Edited Product Button
$('#p-edit').click(function(){
    let id = $("#Myid").attr("value");
    console.log(id);
    let myurl = "http://localhost:8000/api/products/edit/" id "/";

    $.ajax({
        type : 'PUT',
        url : myurl,
        data : {
            csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(),
            name: $('input[name=name]').val(),
            category:$('select[name=category]').val(),
            quantity:$('input[name=quantity]').val(),
            price:$('input[name=price]').val()
        },
        dataType: 'json',
        success: function(data){
            alert("Product Updated!");
            location.reload();
        },
        error:function(data){
            alert("error");
        }
    })
});
 

Это единственная ошибка (304) Я могу видеть, когда пытаюсь обновить сведения о продукте

 [06/Oct/2021 02:08:20] "GET /api/products/ HTTP/1.1" 200 732
[06/Oct/2021 02:12:33] "GET /api/products/6/ HTTP/1.1" 200 76
[06/Oct/2021 02:12:39] "PUT /api/products/edit/6/ HTTP/1.1" 201 76
[06/Oct/2021 02:12:39] "GET / HTTP/1.1" 200 8969
[06/Oct/2021 02:12:40] "GET /static/js/script.js HTTP/1.1" 304 0
[06/Oct/2021 02:12:41] "GET /api/products/ HTTP/1.1" 200 732
 

Обновить:

Я все понял!! Функция запроса для обновления не распознала новые входные данные. поэтому я изменил словарь данных и использовал

 data : $("#editProduct :input").serializeArray(), 
 

и часть щелчка, а также, чтобы

 $('#editProduct').on('submit', function(e){} 
 

это действует как заклинание.