В этой статье приведу пример, как можно использовать AJAX при разработке сайта на Django. Пример будет простой, сделаем кнопку удаления объекта без перезагрузки страницы.

 

 

И так начнем. Для начала создадим модель:

 

 

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. Вот собственно и все, по нажатию кнопки удалить, объект удаляется из базы. 

 

  •  
Адрес веб студии
Позвонить

Городской: +7(8793)33-16-17
Мобильный: +7(928)911-74-69

email веб студии
Написать

manager@kmv-it.ru

Доехать до веб студии
Приехать

г.Пятигорск переулок Первомайский 18

Логотип Кухня сайтов