{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/2019-09-01-django-get-requests/","result":{"data":{"markdownRemark":{"html":"

Hello!

\n

Let's say you want to send a GET request to a Django based server, and you want to use vanilla JavaScript. You don't want to use jQuery, nor any other framework.

\n\n

The HTML:

\n

So, lets say you have a Django app called test_app, with a js script called \"get_example.js\" in its static folder.\nWe want the server to return a message when this button is clicked, so we write this index.html:

\n
<!DOCTYPE html>\n<html>\n    <head>\n        {% load static %}\n        <script src='{% static \"test_app/get_example.js\" %}' defer></script>\n        <title>Test html</title>\n    </head>\n    <body>\n        <button id=\"test-button\">Peter</button>\n    </body>\n</html>
\n

I use the defer attribute here to make sure the script is run after the page has finished parsing. By using defer, we avoid having to wrap all the script in a DOMContentLoaded event listener.

\n

The JavaScript:

\n

Next, lets write the JavaScript code to listen for the click and to send the GET request. Let's say we want to ask the server for the last name associated to the first name that was in the button and replace the text in said button with it:

\n
document.querySelector('#test-button').onclick = () =>\n    {\n        awesome_name = document.querySelector('#test-button').innerHTML;\n        const request_for_last_name = new XMLHttpRequest();\n        request_for_last_name.open('GET', 'users/who?fname=' + awesome_name, true);\n        request_for_last_name.send();\n        request_for_last_name.onload = () =>\n        {\n            response_data = JSON.parse(request_for_last_name.responseText);\n            document.querySelector('#test-button').innerHTML = \"Last name: \" + response_data.lname;\n        };\n    };
\n

The key here is 'users/who?fname=' + awesome_name part.

\n

We will use the route users/who for Django to be able to associate our request to the Python code to run via the urls.py file.

\n

With ?fname= we are saying that we will be sendind data called \"fname\" in this request.

\n

Then, + awesome_name puts the value of the awesome_name variable to the request as the value of \"fname\".

\n

So, when we clic the button, that GET request will be sent to users/who?fname=Peter.

\n

The Python:

\n

The Python code for the Django urls.py file should be something like:

\n
from django.urls import path\n\nfrom . import views\n\nurlpatterns = [\n    path(\"\", views.example),\n    path(\"users/who\", views.get_last_name_view)\n]
\n

Note that we wrote users/who. That way, when we fire the request, Django will match the adress in it and run the getlastname_view function in our views.py file. Note that you can use regular expression (regex) patterns for the path instead.

\n

Side note: it is important to differentiate the paths of diferent kinds GET requests (especially when using regex): if you have for example two differet urlpatterns that Django understands as similar to the adress on your request, it will trigger the first one that matches.

\n

Finally the Python code for the Django views.py file:

\n
from django.shortcuts import render\nfrom django.http import JsonResponse\n\ndef example(request):\n    return render(request, \"test_app/index.html\")\n\ndef get_last_name_view(request):\n    fname = request.GET.get('fname')\n    response_data = {}\n    if fname == \"Peter\":\n        response_data['lname'] = \"Pan\"\n    else:\n        response_data['lname'] = \"Not found\"\n    return JsonResponse(response_data, safe=False)
\n

In this example, the else statement will never be run. But I like to be explicit about if statements.

\n

Here, in fname=request.GET.get('fname'), we take the value of fname sent in the request, and assign it to the fname Python variable.\nNext, we check if it is 'Peter' and if so, we put the last name 'Pan' in a response_data dictionary that we finally return with JsonResponse (with the key \"lname\").

\n

That way, our JavasCript code can access this information once we parse the response with JSON.parse as shown above.

\n

Cheers, have a good one!

","frontmatter":{"title":"Sending AJAX GET requests to a Django server without jQuery","date":"September 2nd, 2019","icon":"☕️"},"fields":{"readingTime":{"text":"3 min read"}}}},"pageContext":{"slug":"/2019-09-01-django-get-requests/"}},"staticQueryHashes":["143701507","588331372"]}