Basic Ajax
Ajax is essential these days, and fortunately Django provides some good mechanism for doing AJAX well. This video goes over some of the basics you need to do and know when doing AJAX in Django.
main/ajax.py
import json
from django.http import Http404, HttpResponse
def more_todo(request):
if request.is_ajax():
todo_items = ['Mow Lawn', 'Buy Groceries',]
data = json.dumps(todo_items)
return HttpResponse(data, content_type='application/json')
else:
raise Http404
def add_todo(request):
if request.is_ajax() and request.POST:
data = {'message': "%s added" % request.POST.get('item')}
return HttpResponse(json.dumps(data), content_type='application/json')
else:
raise Http404
static/js/main.js
$(document).ready(function() {
// AJAX GET
$('.get-more').click(function(){
$.ajax({
type: "GET",
url: "/ajax/more/",
success: function(data) {
for(i = 0; i < data.length; i++){
$('ul').append('<li>'+data[i]+'</li>');
}
}
});
});
// AJAX POST
$('.add-todo').click(function(){
console.log('am i called');
$.ajax({
type: "POST",
url: "/ajax/add/",
dataType: "json",
data: { "item": $(".todo-item").val() },
success: function(data) {
alert(data.message);
}
});
});
// CSRF code
function getCookie(name) {
var cookieValue = null;
var i = 0;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (i; 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({
crossDomain: false, // obviates need for sameOrigin test
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
});
