bartmika/ajax_w_django_json_response_view.md

## ajax_w_django_json_response_view.md

      
    Raw
  

              ajax_w_django_json_response_view.md
            
          
    Example of using Javascript AJAX (XMLHttpRequest) with Django JsonResponse View

mkdir ajax_django_example
cd ajax_django_example/
virtualenv env
source env/bin/activate
python --version
pip install django
django-admin startproject example
cd example
python manage.py startapp hello
python manage.py runserver
# hello/views.py
from django.http import HttpResponse
from django.shortcuts import render
from django.http import JsonResponse


def index(request):
    return render(request, 'hello/index.html', {

    })

def get_version(request):
    return JsonResponse({'version': '0.1.0-beta'})

def post_add(request):
    a = request.POST.get("a")
    b = request.POST.get("b")

    a = float(a)
    b = float(b)
    c = a + b
    return JsonResponse({'result': c})

# Would you like to know more?
# https://docs.djangoproject.com/en/2.2/ref/request-response/#jsonresponse-objects
# hello/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('version', views.get_version, name='version'),
    path('add', views.post_add, name='add'),
]
# example/settings.py

# ...

INSTALLED_APPS = [
    'hello.apps.HelloConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

# ...
# example/urls.py
"""example URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
     path('', include('hello.urls')),
]
// hello/templates/hello/index.js
function getVersion() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById('demoGet').innerHTML = this.responseText;
      }
    };
    xhttp.open('GET', 'version', true);
    xhttp.send();
}

function postAdd() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById('demoPost').innerHTML = this.responseText;
      }
    };
    xhttp.open('POST', 'add', true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("a=1&b=2");
}

// Would you like to know more?
// https://www.w3schools.com/js/js_ajax_intro.asp
<!-- hello/templates/hello/index.html -->
<!DOCTYPE html>
<html>
    <body>
        <h1>Using XMLHttpRequest Object and Django JsonResponse</h1>
        <h2>GET Example</h2>

        <p id="demoGet">Let AJAX change this text.</p>

        <button type="button" onclick="getVersion()">Run GET</button>

        <h2>POST Example</h2>

        <p id="demoPost">Let AJAX change this text.</p>

        <button type="button" onclick="postAdd()">Run POST</button>


        <script>
            {% include "hello/index.js" %}
        </script>

    </body>
</html>