How to make a POST request using DJANGO REST framework with ajax

Question

This is my model class:

    class PoliceAssurance(models.Model):
        Numpolice = models.IntegerField()
        Raison = models.CharField(max_length=50)
        Tel = models.IntegerField()
        Email = models.CharField(max_length=50)

and here is my serializer:

    class PoliceSerializer(serializers.ModelSerializer):        
        class Meta:
            model = PoliceAssurance
            fields = ('Numpolice','Raison','Tel','Email');

Now, I need to make a POST request through an AJAX call. Could anyone please provide information on how I may approach this task?

this is my views.py

@login_required(login_url="login/")
def home(request):
    return render(request,"home.html")

class PoliceViewset(generics.ListCreateAPIView):    
    queryset = PoliceAssurance.objects.all()
    serializer_class =  PoliceSerializer

and my urls.py

    urlpatterns=[
    url(r'^$', views.home, name='home'),
    url(r'PoliceAssurance',views.PoliceViewset.as_view(),              name='PoliceAssurance'),
    ]

this my ajax request

$(#suit).click(function(){          

    var data = {};
    data.Numpolice = $(#num).val();
    data.Raison = $(#raison).val();
    data.Tel = $(#tel).val();
    data.Email = $(#email).val();

    $.ajax({
        type: "POST",
        url: "/PoliceAssurance/",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data){
            alert(data);
        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
});

This is quite broad as is. What are you using at front-end? Do you plan on using some framework such as jquery, angular, etc? stackoverflow.com/questions/20306981/… — Wtower
– Wtower, Commented Jan 3, 2017 at 17:25
Do you have a view? If not, you'll need one, and a url route to go with it. If so, could you post the code? — ChidG
– ChidG, Commented Jan 4, 2017 at 4:23
i posted the code @ChidG now i have a problem to make an ajax request to post data — Mamoudou Ndiaye
– Mamoudou Ndiaye, Commented Jan 4, 2017 at 16:59
And what is the problem? What happens when that ajax code is called? it is very difficult to help you if you don't actually say what the problem is. One problem I can see is that your jquery selectors are using variables which are probably undefined. Usually you would need to use $('#suit'). rather than $(#suit), unless you have defined #suit as a variable, and same for your other jquery selectors. — ChidG
– ChidG, Commented Jan 5, 2017 at 14:09

Tico Tico · Accepted Answer · 2018-05-17 02:33:00Z

6

you may need to see this, http://www.django-rest-framework.org/topics/ajax-csrf-cors/#javascript-clients and django docs in this link(detail), and my code works for me well likes

$.ajax({
    url: 'your web url',
    type: 'POST',
    beforeSend: function (xhr, settings) {
        xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
    },
    success: function (arg) {
        location.reload()
    }
})

Django rest framework not works like normal django. You need to trans "csrfmiddlewaretoken" in data to "X-CSRFToken" or "HTTP-X-CSRFToken" in RequestHeader

answered May 17, 2018 at 2:33

Tico Tico

611 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xenosmilus · Accepted Answer · 2017-03-18 20:00:10Z

1

You need to send the CSRF information along with the Ajax request probably, or exempt your view. See here. If you include this beforeSend function in your ajax it can do the trick:

    $.ajax({
          type: "POST",
          ...
          beforeSend: function(xhr, settings) {
                  if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                          xhr.setRequestHeader("X-CSRFToken", {% csrf_token %});
               }
          },
          ...

Assuming the javascript is part of a template, the csrftoken can be optained by {% csrf_token %}.

Hope this helps.

answered Mar 18, 2017 at 20:00

xenosmilus

111 bronze badge

Comments

NourEldin Osama · Accepted Answer · 2022-11-11 02:26:59Z

0

just edit for the existing answer by Tico Tico

$.ajax({
    url: 'your web url',
    type: 'POST',
    headers: {"X-CSRFToken": "{{ csrf_token }}"},
    success: function (arg) {
        location.reload()
    }
})

answered Nov 11, 2022 at 2:26

NourEldin Osama

1573 silver badges8 bronze badges

Comments

user22459036 · Accepted Answer · 2023-08-28 10:30:45Z

0

<code><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    $(document).ready(function(){
        var csrftoken = Cookies.get('csrftoken');

        $(".auto-submit").change(function() {
            $.post({
                url: "{% url 'get-checkin-type' %}",
                data: $(".auto-submit option:selected").val(),
                headers: {
                    X-CSRFToken: csrftoken
                }
            })
        });
    });
</script>


<form action="" method="post">{% csrf_token %}
    {% for field in form %}
        <div class="{% if field.name == 'checkin_type' %}auto-submit{% endif %}">
            {{ field.errors }}
            {{ field.label_tag }}
            {{ field }}
        </div>
    {% endfor %}
    <input type="submit" value="Send message" />
</form>
</code>

answered Aug 28, 2023 at 10:30

user22459036

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to make a POST request using DJANGO REST framework with ajax

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related