{"id":762,"date":"2013-04-01T00:00:00","date_gmt":"2013-04-01T00:00:00","guid":{"rendered":"https:\/\/fir3netwp.gmsrrpobkbd.com\/2013\/04\/01\/how-do-i-use-ajax-along-side-django\/"},"modified":"2023-02-04T08:49:03","modified_gmt":"2023-02-04T08:49:03","slug":"how-do-i-use-ajax-along-side-django","status":"publish","type":"post","link":"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html","title":{"rendered":"How do I use AJAX along side Django ?"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-662e367851307\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-662e367851307\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html\/#Introduction\" title=\"Introduction\">Introduction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html\/#Example\" title=\"Example\">Example<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html\/#Template_%E2%80%93_ajaxexamplehtml\" title=\"Template &#8211; ajaxexample.html\">Template &#8211; ajaxexample.html<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html\/#View\" title=\"View\">View<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html\/#URLConf\" title=\"URLConf\">URLConf<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"h3\"><span class=\"ez-toc-section\" id=\"Introduction\"><\/span><strong>Introduction<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Within this example we will show you a simple example of how to integrate AJAX with Django.<\/p>\n<p>AJAX (Asynchronous JavaScript and XML) is a technique that provides the ability to update parts of a web page, without reloading the whole page. Now days,\u00a0 typically JSON is the preferred method over XML due to JSON`s lightweight nature (i.e there is no requirement for closing tags like XML).<\/p>\n<h2 class=\"h3\"><span class=\"ez-toc-section\" id=\"Example\"><\/span><strong>Example<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This example will be built around showing you a simple Django app that uses a simple form of AJAX.<\/p>\n<p>In this example the Django app will take a domain name, submit this to the server via a POST using AJAX. The server will then look up the IP address of the domain name and provide an AJAX based response back to the client.<\/p>\n<p>Below shows you an overview of the process involved.<\/p>\n<p>&nbsp;<\/p>\n<p><picture><source srcset=\"https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajax.avif 403w,https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajax-300x253.avif 300w\" sizes=\"(max-width: 403px) 100vw, 403px\" type=\"image\/avif\"><source srcset=\"https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajax.webp 403w,https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajax-300x253.webp 300w\" sizes=\"(max-width: 403px) 100vw, 403px\" type=\"image\/webp\"><img src=\"https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajax.png\" height=\"340\" width=\"403\" srcset=\"https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajax.png 403w, https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajax-300x253.png 300w\" sizes=\"(max-width: 403px) 100vw, 403px\" class=\"alignnone wp-image-761 size-full sp-no-webp\" alt=\"Django app - AJAX\" loading=\"lazy\" decoding=\"async\" style=\"display: block; margin-left: auto; margin-right: auto;\"  > <\/picture><\/p>\n<p>&nbsp;<\/p>\n<p>Lets step through the process step by step,<\/p>\n<ol>\n<li><strong><span style=\"color: #0000ff;\">Client side<\/span><\/strong> :The client issues a HTTP GET for the url \/ajaxexample. This is served by the view named &#8216;main&#8217; and the &#8216;ajaxexample.html&#8217; template is presented.<\/li>\n<li><strong><span style=\"color: #0000ff;\">Client side<\/span><\/strong> : The client then enters a value within the form. The form has an id of #forminput.<\/li>\n<li><strong><span style=\"color: #0000ff;\">Client side<\/span><\/strong> : The value from #forminput is this assigned to the variable &#8216;input_string&#8217; using jquery.<\/li>\n<li><strong><span style=\"color: #0000ff;\">Client side<\/span><\/strong> : Once the form is submitted a POST is sent to the URL \/ajaxexample_json containing the key pair {input_string : &lt;VALUE &gt;}.<\/li>\n<li><strong><span style=\"color: #ff6600;\">Server side<\/span><\/strong> : The view named &#8216;ajax&#8217; then performs the necessary work on the value (in this case resolving the IP address).<\/li>\n<li><strong><span style=\"color: #ff6600;\">Server side<\/span><\/strong> : The view named &#8216;ajax&#8217; then responds with the new value using the key pair {&#8216;server_response&#8217;: &lt;VALUE&gt;}.<\/li>\n<li><strong><span style=\"color: #0000ff;\">Client side<\/span><\/strong> : The template (via the use of jquery) then assigns server_response value to the id &#8216;#result&#8217;.<\/li>\n<\/ol>\n<p>With all that said and done. Here is the config.<\/p>\n<h3 class=\"h3\"><span class=\"ez-toc-section\" id=\"Template_%E2%80%93_ajaxexamplehtml\"><\/span><strong>Template &#8211; ajaxexample.html<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre class=\"prettyprint\">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n\u00a0\u00a0\u00a0 &lt;meta charset=\"utf-8\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;script type='text\/javascript' src='<a class=\"vglnk\" href=\"http:\/\/code.jquery.com\/jquery-1.8.2.js\" rel=\"nofollow\">http:\/\/code.jquery.com\/jquery-1.8.2.js<\/a>'&gt;&lt;\/script&gt;\r\n\u00a0\u00a0 \u00a0&lt;script type=\"text\/javascript\"&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(document).ready(function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#button\").click(function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var input_string = $(\"#forminput\").val();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$.ajax({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0url : \"\/ajaxexample_json\", \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0type : \"POST\",\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0dataType: \"json\", \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0data : {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0client_response : input_string,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0csrfmiddlewaretoken: '{{ csrf_token }}'\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0},\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0success : function(json) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('#result').append( 'ServerResponse:' + json.server_response);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0},\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0error : function(xhr,errmsg,err) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0alert(xhr.status + \": \" + xhr.responseText);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0});\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return false;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0});\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0});\r\n&lt;\/script&gt;\r\n&lt;form method=\"post\" name=\"example form\" &gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{% csrf_token %}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;input name=\"example\" id=\"forminput\" type=\"text\"&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;input id=\"button\" type=\"button\" value=\"send to server\"&gt;&lt;\/input&gt;\r\n&lt;\/form&gt;\r\n&lt;div id=\"result\"&gt;\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<h3 class=\"h3\"><span class=\"ez-toc-section\" id=\"View\"><\/span><strong>View<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre class=\"prettyprint\">from django.http import *\r\nfrom django.shortcuts import render_to_response\r\nfrom django.template import RequestContext\r\nfrom django.utils import simplejson\r\nimport socket\r\n\r\ndef main(request):\r\n\u00a0\u00a0 return render_to_response('ajaxexample.html', context_instance=RequestContext(request))\r\n\r\ndef ajax(request):\r\n\u00a0\u00a0 if request.POST.has_key('client_response'):\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 x = request.POST['client_response'] \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0 \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 y = socket.gethostbyname(x) \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 response_dict = {} \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0 \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 response_dict.update({'server_response': y }) \u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0 \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return HttpResponse(simplejson.dumps(response_dict), mimetype='application\/javascript') \r\n\u00a0\u00a0 else:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return render_to_respons<span class=\"prettyprint\">e('ajaxexample.html', context_instance=RequestContext(request)<\/span><\/pre>\n<h3 class=\"h3\"><span class=\"ez-toc-section\" id=\"URLConf\"><\/span><strong>URLConf<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre class=\"prettyprint\">from django.conf.urls.defaults import patterns, include, url\r\n\r\nurlpatterns = patterns('',\r\n\u00a0\u00a0\u00a0 url(r'^ajaxexample$', 'digajax.views.main'),\r\n\u00a0\u00a0\u00a0 url(r'^ajaxexample_json$', 'digajax.views.ajax'),\r\n)<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Within this example we will show you a simple example of how to integrate AJAX with Django. AJAX (Asynchronous JavaScript and XML) is a technique that provides the ability to update parts of a web page, without reloading the whole page. Now days,\u00a0 typically JSON is the preferred method over XML due to JSON`s &#8230; <a title=\"How do I use AJAX along side Django ?\" class=\"read-more\" href=\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html\" aria-label=\"Read more about How do I use AJAX along side Django ?\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":760,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How do I use AJAX along side Django ? - Fir3net<\/title>\n<meta name=\"description\" content=\"Introduction Within this example we will show you a simple example of how to integrate AJAX with Django. AJAX (Asynchronous JavaScript and XML) is a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How do I use AJAX along side Django ? - Fir3net\" \/>\n<meta property=\"og:description\" content=\"Introduction Within this example we will show you a simple example of how to integrate AJAX with Django. AJAX (Asynchronous JavaScript and XML) is a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html\" \/>\n<meta property=\"og:site_name\" content=\"Fir3net\" \/>\n<meta property=\"article:published_time\" content=\"2013-04-01T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-04T08:49:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajaxapp.png\" \/>\n\t<meta property=\"og:image:width\" content=\"287\" \/>\n\t<meta property=\"og:image:height\" content=\"61\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rick Donato\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rick Donato\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html\"},\"author\":{\"name\":\"Rick Donato\",\"@id\":\"https:\/\/www.fir3net.com\/#\/schema\/person\/ab35009601b7687ee1c5310be6038037\"},\"headline\":\"How do I use AJAX along side Django ?\",\"datePublished\":\"2013-04-01T00:00:00+00:00\",\"dateModified\":\"2023-02-04T08:49:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html\"},\"wordCount\":322,\"publisher\":{\"@id\":\"https:\/\/www.fir3net.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajaxapp.png\",\"articleSection\":[\"Django\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html\",\"url\":\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html\",\"name\":\"How do I use AJAX along side Django ? - Fir3net\",\"isPartOf\":{\"@id\":\"https:\/\/www.fir3net.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajaxapp.png\",\"datePublished\":\"2013-04-01T00:00:00+00:00\",\"dateModified\":\"2023-02-04T08:49:03+00:00\",\"description\":\"Introduction Within this example we will show you a simple example of how to integrate AJAX with Django. AJAX (Asynchronous JavaScript and XML) is a\",\"breadcrumb\":{\"@id\":\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html#primaryimage\",\"url\":\"https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajaxapp.png\",\"contentUrl\":\"https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajaxapp.png\",\"width\":287,\"height\":61},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.fir3net.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Programming\",\"item\":\"https:\/\/www.fir3net.com\/programming\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Development\",\"item\":\"https:\/\/www.fir3net.com\/programming\/web-development\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Django\",\"item\":\"https:\/\/www.fir3net.com\/programming\/web-development\/django\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"How do I use AJAX along side Django ?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.fir3net.com\/#website\",\"url\":\"https:\/\/www.fir3net.com\/\",\"name\":\"Fir3net\",\"description\":\"Keeping you in the know\",\"publisher\":{\"@id\":\"https:\/\/www.fir3net.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.fir3net.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.fir3net.com\/#organization\",\"name\":\"Fir3net\",\"url\":\"https:\/\/www.fir3net.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.fir3net.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.fir3net.com\/wp-content\/uploads\/Fir3net-Background-Logo-compressed.png\",\"contentUrl\":\"https:\/\/www.fir3net.com\/wp-content\/uploads\/Fir3net-Background-Logo-compressed.png\",\"width\":390,\"height\":88,\"caption\":\"Fir3net\"},\"image\":{\"@id\":\"https:\/\/www.fir3net.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.fir3net.com\/#\/schema\/person\/ab35009601b7687ee1c5310be6038037\",\"name\":\"Rick Donato\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.fir3net.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d75d69a54c0ca3b32c24c3a9703b623c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d75d69a54c0ca3b32c24c3a9703b623c?s=96&d=mm&r=g\",\"caption\":\"Rick Donato\"},\"description\":\"Rick Donato is a Network Automation Architect\/Evangelist and the founder of Packet Coders.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How do I use AJAX along side Django ? - Fir3net","description":"Introduction Within this example we will show you a simple example of how to integrate AJAX with Django. AJAX (Asynchronous JavaScript and XML) is a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html","og_locale":"en_US","og_type":"article","og_title":"How do I use AJAX along side Django ? - Fir3net","og_description":"Introduction Within this example we will show you a simple example of how to integrate AJAX with Django. AJAX (Asynchronous JavaScript and XML) is a","og_url":"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html","og_site_name":"Fir3net","article_published_time":"2013-04-01T00:00:00+00:00","article_modified_time":"2023-02-04T08:49:03+00:00","og_image":[{"width":287,"height":61,"url":"https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajaxapp.png","type":"image\/jpeg"}],"author":"Rick Donato","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Rick Donato","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html#article","isPartOf":{"@id":"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html"},"author":{"name":"Rick Donato","@id":"https:\/\/www.fir3net.com\/#\/schema\/person\/ab35009601b7687ee1c5310be6038037"},"headline":"How do I use AJAX along side Django ?","datePublished":"2013-04-01T00:00:00+00:00","dateModified":"2023-02-04T08:49:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html"},"wordCount":322,"publisher":{"@id":"https:\/\/www.fir3net.com\/#organization"},"image":{"@id":"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html#primaryimage"},"thumbnailUrl":"https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajaxapp.png","articleSection":["Django"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html","url":"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html","name":"How do I use AJAX along side Django ? - Fir3net","isPartOf":{"@id":"https:\/\/www.fir3net.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html#primaryimage"},"image":{"@id":"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html#primaryimage"},"thumbnailUrl":"https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajaxapp.png","datePublished":"2013-04-01T00:00:00+00:00","dateModified":"2023-02-04T08:49:03+00:00","description":"Introduction Within this example we will show you a simple example of how to integrate AJAX with Django. AJAX (Asynchronous JavaScript and XML) is a","breadcrumb":{"@id":"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html#primaryimage","url":"https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajaxapp.png","contentUrl":"https:\/\/www.fir3net.com\/wp-content\/uploads\/2013\/04\/images_legacy_ajaxapp.png","width":287,"height":61},{"@type":"BreadcrumbList","@id":"https:\/\/www.fir3net.com\/Web-Development\/Django\/how-do-i-use-ajax-along-side-django.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fir3net.com\/"},{"@type":"ListItem","position":2,"name":"Programming","item":"https:\/\/www.fir3net.com\/programming"},{"@type":"ListItem","position":3,"name":"Web Development","item":"https:\/\/www.fir3net.com\/programming\/web-development"},{"@type":"ListItem","position":4,"name":"Django","item":"https:\/\/www.fir3net.com\/programming\/web-development\/django"},{"@type":"ListItem","position":5,"name":"How do I use AJAX along side Django ?"}]},{"@type":"WebSite","@id":"https:\/\/www.fir3net.com\/#website","url":"https:\/\/www.fir3net.com\/","name":"Fir3net","description":"Keeping you in the know","publisher":{"@id":"https:\/\/www.fir3net.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fir3net.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fir3net.com\/#organization","name":"Fir3net","url":"https:\/\/www.fir3net.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fir3net.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.fir3net.com\/wp-content\/uploads\/Fir3net-Background-Logo-compressed.png","contentUrl":"https:\/\/www.fir3net.com\/wp-content\/uploads\/Fir3net-Background-Logo-compressed.png","width":390,"height":88,"caption":"Fir3net"},"image":{"@id":"https:\/\/www.fir3net.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fir3net.com\/#\/schema\/person\/ab35009601b7687ee1c5310be6038037","name":"Rick Donato","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fir3net.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d75d69a54c0ca3b32c24c3a9703b623c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d75d69a54c0ca3b32c24c3a9703b623c?s=96&d=mm&r=g","caption":"Rick Donato"},"description":"Rick Donato is a Network Automation Architect\/Evangelist and the founder of Packet Coders."}]}},"_links":{"self":[{"href":"https:\/\/www.fir3net.com\/wp-json\/wp\/v2\/posts\/762"}],"collection":[{"href":"https:\/\/www.fir3net.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fir3net.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fir3net.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fir3net.com\/wp-json\/wp\/v2\/comments?post=762"}],"version-history":[{"count":1,"href":"https:\/\/www.fir3net.com\/wp-json\/wp\/v2\/posts\/762\/revisions"}],"predecessor-version":[{"id":3623,"href":"https:\/\/www.fir3net.com\/wp-json\/wp\/v2\/posts\/762\/revisions\/3623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fir3net.com\/wp-json\/wp\/v2\/media\/760"}],"wp:attachment":[{"href":"https:\/\/www.fir3net.com\/wp-json\/wp\/v2\/media?parent=762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fir3net.com\/wp-json\/wp\/v2\/categories?post=762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fir3net.com\/wp-json\/wp\/v2\/tags?post=762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}