Django update a page on POST.get

Question

I have a Django project where i use NFC keychains. When a keychain is read, the reader sends a HTTP POST request to my Django server, which is now basically displaying the key that has been read.

What causes the problem is that in order to show that the keychain has been read i need to refresh the page.

Is there any way to show the changes immediately, or force a refresh on the browser from the server when a POST request is executed? I have read that Ajax might be capable for this, but i dont know Ajax. If Ajax would be the solution, can anyone show me a working example?

Answer 1

Completely up to you but you could HTTP POST whatever request data you need to a view, then collect that data - do you manipulations and then send back a JsonResponse (which Django handles fairly well).

In your Javascript/jQuery/React/Vue code you could then collect the response object and manipulate the front end if a valid keychain is returned...

Typical usage is like:

from django.http import JsonResponse
from django.shortcuts import render

def end_point(request):
   context = {}
   if request.method == 'POST':
       token = request.POST.get('token', None)
       if token is not None: 
           token = 'Ax44sX%4adLJ8dBt6J@XKas12cvozlp'
           context = { 'data': token }
           return JsonResponse(context)
       else:
           context = { 'message': 'There doesn\'t look to be any token here, keep looking...' }
           return JsonResponse(context)               
   return render(request, 'index.html', context, content_type='application/xhtml+xml')

You need to "mop" up the JsonResponse with jQuery, something like:

$.ajax({
   type: "POST",
   url: "http://localhost:8000/endpoint",
   success: function(response) {
       // Do something with response here!! Validate, manipulate, etc etc
       console.log(response.data);
   }
});

The context object you pass back will be accessible within the response object.

Be careful tho - you'll need to pass through a valid {% csfr_token %} (this can be done when you setup you POST request). I can explain if needed how to do this.

Where I have rendered a JsonResponse you could also render a normal HttpResponse (with the page refreshing), passing your token value into the same context:

def end_point(request):
       context = {}
       if request.method == 'POST':
           token = request.POST.get('token', None)
           if token is not None: 
               token = 'Ax44sX%4adLJ8dBt6J@XKas12cvozlp'
               context['data'] = token
               return render(request, 'index.html', context, content_type='application/xhtml+xml') 
           else:
               context = { 'message': 'There doesn\'t look to be any token here, keep looking...' }
               return JsonResponse(context)               
       return render(request, 'index.html', context, content_type='application/xhtml+xml') 

And then in your index.html template file:

{% if data %}
<p>Your token is: {{ data }}</p>
{% endif %}