Смотреть

Позвонить нам +7(906)4678235

Нужны клиенты?

shape shape

Django Апрель 11, 2023

Django и Ajax

Author Picture

Написал Андрей Галкин

Просмотров 10

Blog Thumbnail

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

теги: Django

Давайте работать вместе

Расскажите нам о своем проекте