I have a template called basket whenever I want to update the product quantity it works fine but the success message doesn't show until I refresh the page

views.py:

def basket_update(request):
basket = Basket(request)
if request.POST.get('action') == 'post':
    book_id = int(request.POST.get('bookid'))
    book_qty = int(request.POST.get('bookqty'))
    basket.update(book=book_id, qty=book_qty)
    messages.success(request,"Basket Has Been Updated")
    basketqty = basket.__len__()
    baskettotal = basket.get_total_price()
    response = JsonResponse({'qty': basketqty, 'subtotal': baskettotal})
    return response

ajax:

  $(document).on('click', '.update-button', function (e) {
    e.preventDefault();
    var book_id = $(this).data('index');
    $.ajax({
      type: 'POST',
      url: '{% url "basket:basket_update" %}',
      data: {
        bookid: $(this).data('index'),
        bookqty: $('#select' + book_id + ' option:selected').text(),
        csrfmiddlewaretoken: "{{csrf_token}}",
        action: 'post'
      },
      success: function (json) {
        document.getElementById("basket-qty").innerHTML = json.qty
        document.getElementById("subtotal").innerHTML = json.subtotal
      },
      error: function (xhr, errmsg, err) {}
    });
  })