单击一个按钮并从views.py中运行python function，在django中使用JS/ajax

Question

I've been reading this days about how can I call a python function when I press a button and I'm very confused. One of the things that I saw is that I have to use ajax and most of the people use jquery to do it.

If I understood correctly the structure has to be similar to this,

$(document).ready(function() {
    $.ajax({
        url: '',
        type: '',
        data: {'A':0},
        dataType:'',
        success: function(resp){
            console.log(resp);
        }
    });
});

With this information, my final code is,

views.py

def vista_sumar(request):
    if request.method == 'POST':
        a = request.POST['a']
        b = request.POST['b']
        c = int(a) + int(b)
        ctx = {'Result':c}

    return render(request,'main.html',ctx)

urls.py

from project.views import vista_sumar

urlpatterns = [
    path('prueba/',vista_sumar),
]

main.html

<input type="button" value="PRUEBA" class="boton">

<script src="{% static '/js/jquery-3.4.1.min.js' %}"></script>
<script type="text/javascript" src="{% static '/js/filters.js' %}"></script>

filters.js (the big fail)

$('#prueba').click(function() {
    alert('boton is working')
    a =1;
    b =3;
    $.ajax({
        method: 'POST',
        url: '/../../prueba/',
        data: {
            'a': a,
            'b': b, 
        },
        dataType: "json",
        success: function(response) {
            alert(response.Result);
        }
    }); 
});

I know the button is working because the first alert is working. The problem is when I use ajax .

The code error is 403=Forbbiden and is failing in the ajax.send()

Can somebody help me?

EDIT With the help of @epikstar I solved one thing, I forgot the CSRF . I added in my js file ,

$('#prueba').click(function() {
    alert('boton pulsado');
    var csrftoken = $("[name=csrfmiddlewaretoken]").val();
    alert(csrftoken)
    a =1;
    b =3;
    $.ajax({
        url: '/../../prueba/',
        type: 'POST',
        headers:{"X-CSRFToken": csrftoken},
        data: {
            'a': a,
            'b': b, 
        },
        dataType: "json",
        cache: true,
        success: function(response) {
            alert('succes')
            alert(response.Result);
        }
    });
    alert('fin') 
});

I imported in my views.py

from django.template.context_processors import csrf

And I add this line in my main.html

<input type="button" value="PRUEBA" id="prueba">{% csrf_token %}

But it is still not working. BUT the problem is different because I added too a print in my python function and it shows the result 4, therefore the problem nos is that I'm not returning correctly the result.

def vista_sumar(request):
    if request.method == 'POST':
        a = request.POST['a']
        b = request.POST['b']
        c = int(a) + int(b)
        ctx = {'Result':c}

        print(ctx)

    return render(request,'main.html',ctx)

It prints 4

But i added a console.log(response); and console.log(response.Result); inside the success and don't return anything...

Thank you very much.

Answer 1

You should add the CSRF token like this:

var csrftoken = $("[name=csrfmiddlewaretoken]").val();
//example ajax
$.ajax({
    url: url,
    type: 'POST',
    headers:{
        "X-CSRFToken": csrftoken
    },
    data: data,
    cache: true,
});

or you can add it directly from django variable:

 $.ajax({
         type: 'POST',
         headers:{
        "X-CSRFToken": '{{ csrf_token }}'
         }
  })

take a look here to discover what csrf token does: https://docs.djangoproject.com/fr/2.2/ref/csrf/