Originally published at melvinkoh.me . What I have now? API endpoints with Schema provided They require Token Authentication What I intend to do? Create a form to interact with these endpoints and perform validation and preprocessing before calling REST service. Motivation: Provide intuitive interaction UI to REST services. Reuse code, reuse existing REST service when creating extra presentation layer. Process form asynchronously (AJAX) without sacrificing powerful built-ins of Django Form AJAX with CRSF protection Create a simple form We will start with creating a Form: # forms.pyfrom django import forms class MyForm(forms.Form): student_id = forms.CharField(max_length=10, required=True) student_name = forms.CharField(max_length=255, required=True) def clean_student_id(self): # Pre-process student_id return re.sub('\D', '', self.cleaned_date.get('student_id')) Next, we create a simple template and view to render this form. # in templates/my_form.html# Add these into your body<form action=""> {% crsf_token %} {{ my_form.as_p }} <input type="button" id="btn-submit_my_form"></form> In your views.py: # I'm using class-based view here # Skip importsclass MyFormView(TemplateView): template_name = 'my_form.html' def get_context_data(self, **kwargs): context = super(MyFormView, self).get_context_data(**kwargs) context['my_form'] = MyForm() return context After mapping your url to MyFormView, you should be able to view your form. Add AJAX call We want to submit our form asynchronously, AJAX is the only solution. Let’s add some script in your . I will be using jQuery syntax, make you have the jQuery library imported. my_form.html <script> $('#request-verification').on('click', function(event){ event.preventDefault(); $.ajax({ url : "{% url 'ajax:my_form' %}", // the endpoint type : "POST", // http method data : { student_id : $('#id_student_id').val(), student_name : $('#id_student_name').val()} success : function(json, textMsg, xhr) { alert('AJAX called successfully') }, error : function(xhr,errmsg,err) { alert('Opps! Something's wrong'!) } }); });</script> The callback above first prevent the default event being triggered by defining . In attribute, we collect a dictionary of form inputs. Replace the URL to your respective URL name. event.preventDefault() data If the AJAX call successfully, we prompt an alert says that ‘AJAX called successfully’, whereas alert user with another message if error occurs. Deal with CSRF We do not want to sacrifice CSRF protection in Django, django recognize your incoming request with it’s CSRF protection token in your request header. If you run your code above, you will get a CSRF validation error. To deal with it, add this snippet of code into your template script tags (I prefer creating a separate .js file and import into my template): # This snippet is provided in Django official documentation function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie !== '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } var csrftoken = getCookie('csrftoken'); function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function(xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } }); The code above will pre-process your AJAX request by adding a header before sending your request. Till now, your front-end is good to go. What about backend? Let us dive into our AJAX endpoint. X-CSRFToken # Your ajax endpoint view, I am using function-based view. @require_http_methods(['POST'])def my_form_ajax_endpoint(request): # Process your data here. Of course, at this point, you should be able to create an async call using AJAX. However, what I want is not simply this, I want to process my POST data with Django Form built-ins. Let our form class do the dirty work for us. We will only process it if the data are valid. MyForm # Your ajax endpoint view, I am using function-based view. @require_http_methods(['POST'])def my_form_ajax_endpoint(request): # Process your data here. form = MyForm(request.POST) if form.is_valid(): # We process further here.. # I will talk about calling another REST service from here in Part 2 return JsonResponse({"message":"form is submitted"}, status=201) return JsonResponse({"error":"invalid input"}, status=400) As of this point, async call using AJAX with CSRF preserved can be done in a breeze. Your clap will definitely drive me further. Give me a clap if you like this post.
