Access Python Rest API using AJAX jQuery

Question

I don't know python.
I'm just requesting Python REST APIs using jQuery and AJAX.

Here's my Code so far:

<!DOCTYPE html>
<html>
<head>
<title>Announcements</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="announcements">

</div>
<script>
$(document).ready(function(){
    $.ajax({
        dataType: "json",
        method: "GET",
        url: "/mhtsessions/annoucements/",
        data: {
          csrfmiddlewaretoken:  getCookie('csrftoken')
        },
        success: function(data){
            $("#announcements").html(data);
      }
    });
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

});
</script>
</body>
</html>

I also need to pass CSRF Token to access the APIs.
Where CSRF Token is generated by Django Rest Framework.
I've seen this Question, it's not my case, and I also need to pass CSRF Token.

EDIT:
Also, I'm getting response in JSON in POSTMAN, I just need JS or AJAX Code to show it to users.

The API developer needs to disable CSRF for the requests and implement proper authentication. https://stackoverflow.com/questions/11374382/how-can-i-disable-djangos-csrf-protection-only-in-certain-cases — Thomas Schwärzl, Jun 07 '17 at 10:44
I tried without `CSRF` and with `CSRF` both ways I'm getting blank page with above code. — Nirav Madariya, Jun 07 '17 at 11:16

score 1 · Accepted Answer · answered Jun 07 '17 at 12:19

1

Actually, you dont need to use csrf_token for GET request (requests that are not meant to change data in database). I will write a working example for POST request using jquery.

   $('.deleteCheckpoint').click(function(e){
      e.preventDefault();
      $.ajax({
        type: "POST",
        url: 'checkpoint/delete/',
        data: {
          csrfmiddlewaretoken:  getCookie('csrftoken')
        },
      success: function(){
        notification_message('Checkpoint was succesfully deleted');
      }
      });
   });

The function getCookie is from the official documentation https://docs.djangoproject.com/en/1.11/ref/csrf/

Make sure that you have already store the cookie with the csrf_token, if you havent then include a {% csrf_token %} in you html page. Django will automatically store the csrf_token in the browser, as a result the getCookie function will return the correct value.

answered Jun 07 '17 at 12:19

Michael Marinos Likouras

568
6
15

As I said before, I don't know Python, and tried your solution, it says `getCookie ()` is not defined. – Nirav Madariya Jun 07 '17 at 13:13
Actually, it is not python but javascript. So you need to create a file (p.x. main.js) include it in your template ( ) and add the function from the above link. – Michael Marinos Likouras Jun 07 '17 at 13:23
I have `csrftoken` in cookie, I've added `getCookie()`, still nothing. :( – Nirav Madariya Jun 07 '17 at 13:31
In your terminal, can you see the request. A line like the above. [07/Jun/2017 13:29:36] "GET /mhtsessions/annoucements/ HTTP/1.1" 200 7706 – Michael Marinos Likouras Jun 07 '17 at 13:33
updated the question, I'm seeing 625 instead of 7706, I'm trying to `GET`, not `POST`. – Nirav Madariya Jun 07 '17 at 13:36
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146078/discussion-between-nirav-madariya-and-michael-marinos-likouras). – Nirav Madariya Jun 07 '17 at 13:56

Access Python Rest API using AJAX jQuery

1 Answers1