В этой статье приведу пример, как можно использовать AJAX при разработке сайта на Django. Пример будет простой, сделаем кнопку удаления объекта без перезагрузки страницы.
И так начнем. Для начала создадим модель:
class Company(models.Model):
title = models.CharField(max_length=100, verbose_name=u'Название')
И так начнем. Для начала создадим модель:
class Company(models.Model):
title = models.CharField(max_length=100, verbose_name=u'Название')
Создадим файл ajax-script.js и напишем в нем следующие:
$(document).ready(function() {
// 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);
}
}
});
$('.companydelete').on('click', function(e) {
e.preventDefault();
var $this = $(this),
data = $this.data();
$this.hide();
$.ajax({
url: '/companydeleteitem/',
method: 'POST',
data: data,
success: function(d) {
console.log(d);
},
error: function(d) {
console.log(d);
}
});
});
});
В первую очередь мы создали функцию добавляющая CSRF токен. Затем создали функцию ajax-запроса на удаление объекта 'companydelete'. Не буду расписывать, что здесь для чего, это вы можете прочитать при изучении ajax. Единственное на что нужно обратить внимание это url, я указал /companydeleteitem/, после его же укажем в urls.py.
Создадим файл ajax.py в него будем писать все функции связанные с ajax, чтобы отделить их от обычных функций (все это можно делать и в views.py):
def companydeleteitem(request):
if request.user.is_authenticated() and request.is_ajax() and request.POST:
object_id = request.POST.get('id', None)
b = get_object_or_404(Company, id=object_id)
b.delete()
data = {'message': 'delete'.format(b)}
return HttpResponse(json.dumps(data), content_type='application/json')
else:
return JsonResponse({'error': 'Only authenticated users'}, status=404)
Немного объясню, что здесь происходит. Функция проверяет зарегистрирован ли пользователь, запрос ajax и запрос методом post ли это. Если все верно, то считываем id объекта (в шаблоне укажем в data-id), создаем переменную с объектом, который нам нужен и удаляем его, возвращаем сообщение в виде json, что объект удален иначе возвращаем сообщение 'error': 'Only authenticated users'.
Теперь в urls.py пропишем конфигурацию:
>
url(r'^companydeleteitem/$', companydeleteitem, name='companydeleteitem'),
Теперь при переходе по /companydeleteitem/ у нас вызывается функция companydeleteitem.
Осталось настроить шаблон:
{%for item in companyimage_list%}
<li data-id="{{ item.id }}" class="companydelete" data-type="company">
<a href="#">Удалить</a>
<li>
{%endfor%}
У меня в шаблоне ссылка на удаление находится в теге <li>, так как я имею целый список ссылок с разными функциями, вы можете не использовать тег <li>, но тогда нужно будет немного исправить функцию удаления в ajax-script.js. Вот собственно и все, по нажатию кнопки удалить, объект удаляется из базы.
$(document).ready(function() {
// 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);
}
}
});
$('.companydelete').on('click', function(e) {
e.preventDefault();
var $this = $(this),
data = $this.data();
$this.hide();
$.ajax({
url: '/companydeleteitem/',
method: 'POST',
data: data,
success: function(d) {
console.log(d);
},
error: function(d) {
console.log(d);
}
});
});
});
В первую очередь мы создали функцию добавляющая CSRF токен. Затем создали функцию ajax-запроса на удаление объекта 'companydelete'. Не буду расписывать, что здесь для чего, это вы можете прочитать при изучении ajax. Единственное на что нужно обратить внимание это url, я указал /companydeleteitem/, после его же укажем в urls.py.
Создадим файл ajax.py в него будем писать все функции связанные с ajax, чтобы отделить их от обычных функций (все это можно делать и в views.py):
def companydeleteitem(request):
if request.user.is_authenticated() and request.is_ajax() and request.POST:
object_id = request.POST.get('id', None)
b = get_object_or_404(Company, id=object_id)
b.delete()
data = {'message': 'delete'.format(b)}
return HttpResponse(json.dumps(data), content_type='application/json')
else:
return JsonResponse({'error': 'Only authenticated users'}, status=404)
Немного объясню, что здесь происходит. Функция проверяет зарегистрирован ли пользователь, запрос ajax и запрос методом post ли это. Если все верно, то считываем id объекта (в шаблоне укажем в data-id), создаем переменную с объектом, который нам нужен и удаляем его, возвращаем сообщение в виде json, что объект удален иначе возвращаем сообщение 'error': 'Only authenticated users'.
Теперь в urls.py пропишем конфигурацию:
>
url(r'^companydeleteitem/$', companydeleteitem, name='companydeleteitem'),
Теперь при переходе по /companydeleteitem/ у нас вызывается функция companydeleteitem.
Осталось настроить шаблон:
{%for item in companyimage_list%}
<li data-id="{{ item.id }}" class="companydelete" data-type="company">
<a href="#">Удалить</a>
<li>
{%endfor%}
У меня в шаблоне ссылка на удаление находится в теге <li>, так как я имею целый список ссылок с разными функциями, вы можете не использовать тег <li>, но тогда нужно будет немного исправить функцию удаления в ajax-script.js. Вот собственно и все, по нажатию кнопки удалить, объект удаляется из базы.
