Невозможно получить переменную в шаблоне при вызове Django ajax

Я пытаюсь получить значение счетчика, переданное из представления в html шаблоне .Оно приходит как None, однако в печати представления и в журнале успеха ajax оно приходит правильным.

JS ajax func

           $(".pos").click(function(){
            counter=counter+1;
            $(".add").html('add counter '+counter);
            $.ajax(
                { url :'page',
                  type :'get' ,
                 
                  data:{
                    quantity: counter
                   },
                    
                success:function(response){
                  console.log(response);
                }

                   
                   

                }
            );

Мое мнение

def page(request):
    counter=request.GET.get('quantity')
    print(counter) ## this is printing fine
    return render(request,'page.html',{'counter':counter})

html шаблон

<body>
    {{counter}}
    <button class="btn neg" name="neg-btn">-</button>
    <button class="btn add" name="add-btn" >add to box</button>
    <button class="btn pos" id="test" name="pos-btn">+</button>
</body>

получение этого счетчика как None

Обычно у вас есть два представления, одно для отображения шаблона, а другое для ajax-запроса. Это помогает держать ваш код более организованным и иметь функции, выполняющие точно одну задачу, так как большинство из них описаны в их именовании.

Одна важная вещь, которая происходит в вашем представлении, заключается в том, что вы возвращаете HTML, сгенерированный render API, а не значение счетчика. Конечно, есть много способов сделать это правильно, но вот одно из возможных решений:

page.html

{% extends 'base.html'%}

{% block content %}
<body>
    <div id="counter">
        {{counter}}
    </div>
    
    <button class="btn neg" id="neg" name="neg-btn">-</button>
    <button class="btn add" id="add" name="add-btn" >add to box</button>
    <button class="btn pos" id="pos" name="pos-btn">+</button>
</body>
{% endblock content %}

{% block script %}
<script>
    let counter = parseInt("{{counter}}");
    let page_url = "{% url 'core:page' %}";
    console.log(page_url)
    $( "#pos" ).click(function() {
        counter += 1;
        $( "#counter" ).replaceWith(`<div id="counter">${counter}</div>`);
    });
    $( "#neg" ).click(function() {
        counter -= 1;
        $( "#counter" ).replaceWith(`<div id="counter">${counter}</div>`);
    });
    $( "#add" ).click(function() {
        $.ajax({ 
                    url :page_url,
                    type :'post' ,
                    data:
                    {
                        counter: counter,
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                    },                    
                    success:function(response){
                    console.log(response);
                    }
                });
    });
</script>
{% endblock script %}

views.py

from django.http import JsonResponse

def page(request):
    counter = 0
    if request.method == 'POST':
        counter = int(request.POST.get('counter'))
        print(counter)
        return JsonResponse({'counter': counter})
    
    return render(request,'page.html',{'counter':counter})
Вернуться на верх