Django - изменение значения объекта и отображение его без перезагрузки

Я получил эту модель: 

class OrderItem(models.Model):
    order = models.ForeignKey(Order, on_delete=models.CASCADE)
    item = models.ForeignKey(Product, on_delete=models.CASCADE)
    quantity = models.IntegerField()

и я хотел бы сделать так, чтобы пользователь мог изменять значение количества без перезагрузки страницы. пытался сделать это таким образом:

просмотров:

def increaseQuantity(request):
    if request.method == 'GET':
        orderItem_id = request.GET['orderItem_id']
        orderitem = OrderItem.objects.get(id=orderItem_id)
        orderitem.quantity += 1
        orderitem.save()

url

path('cart/increase/', increaseQuantity, name='increase'),

Шаблон:

{% for product in products %}
    <a href="#" data-orderItemId="{{product.id}}" class = "quantity-increase"><div >Some button content</div></a>
{% endfor %}

#
#
#
$('.quantity-increase').click(function(){
    var orderItemId;
    orderItemId = $(this).attr("data-orderItemId");
    $.ajax({
        type: "GET",
        url: "increase",
        data:{
            orderItem_id:orderItemId
        },
    })
})

Количество увеличивается правильно, но мне нужно перезагрузить страницу, чтобы увидеть результаты. Что нужно добавить/изменить, чтобы можно было видеть их без перезагрузки?

Метод POST больше подходит для этого запроса

view

from django.http import JsonResponse

def increaseQuantity(request):
    if request.method == 'POST':
        if request.POST.get("operation") == "increase":
            orderitem = OrderItem.objects.get(id=request.POST.get('orderItem_id', None))
            orderitem.quantity += 1
            orderitem.save()
            return JsonResponse({'count':orderitem.quantity)
    return JsonResponse({'error':'error')

html

{% for product in products %}
    <a href="#" data-orderItemId="{{product.id}}" class = "quantity-increase"><div >Some button content</div></a>
{% endfor %}

#
#
#
$('.quantity-increase').click(function(){
    var orderItemId;
    orderItemId = $(this).attr("data-orderItemId");
    $.ajax({
        type: "POST",
        url: "increase",
        data:{
            orderItem_id:orderItemId,
            csrfmiddlewaretoken: '{{ csrf_token }}',
            'operation':'increase'
        },
        success: function(data) {
                $('.count-of-item').html(data.count) // your results element to show current quantity      
                console.log(data.count)
            },
    })
})
Вернуться на верх