Add AJAX view and control to example app.

Author: tim-schilling

example/templates/index.html

@@ -15,5 +15,21 @@ <h1>Index of Tests</h1>
       </ul>
       <p><a href="/admin/">Django Admin</a></p>
     {% endcache %}
+    <p>
+      <span>Value </span>
+      <span id="session-value">{{ request.session.value|default:0 }}</span>
+      <button id="increment" data-url="{% url 'ajax_increment' %}" type="button">Increment</button>
+    </p>
+  <script>
+    const increment = document.querySelector("#increment");
+    const value = document.querySelector("#session-value");
+    increment.addEventListener("click", function () {
+      fetch(increment.dataset.url).then( function (response) {
+        response.json().then(function(data) {
+          value.innerHTML = data.value;
+        });
+      });
+    });
+  </script>
   </body>
 </html>

example/urls.py

@@ -2,11 +2,14 @@
 from django.urls import include, path
 from django.views.generic import TemplateView
 
+from example.views import increment
+
 urlpatterns = [
     path("", TemplateView.as_view(template_name="index.html")),
     path("jquery/", TemplateView.as_view(template_name="jquery/index.html")),
     path("mootools/", TemplateView.as_view(template_name="mootools/index.html")),
     path("prototype/", TemplateView.as_view(template_name="prototype/index.html")),
     path("admin/", admin.site.urls),
+    path("ajax/increment", increment, name="ajax_increment"),
     path("__debug__/", include("debug_toolbar.urls")),
 ]

example/views.py

@@ -0,0 +1,10 @@
+from django.http import JsonResponse
+
+
+def increment(request):
+    try:
+        value = int(request.session.get("value", 0)) + 1
+    except ValueError:
+        value = 1
+    request.session["value"] = value
+    return JsonResponse({"value": value})