воскресенье, 20 января 2013 г.

Связка Django+ajax

Довольно долго мучился с выбором того, что выбрать для Django+ajax в своих проектах на django. Решил остановится на самом простом варианте- JS библиотеке jQuery

Подключаем её в шаблоне


Создаем файл, отвечающий за передачу csrf_token в POST запрос(Кто не знает что такое csrf - читать здесь на английском). Назовем его settings.js, пропишем в него:
$.ajaxSetup({ 
    beforeSend: function(xhr, settings) {
        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;
        }
        if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
            // Only send the token to relative URLs i.e. locally.
     xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
     xhr.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded; charset=UTF-8');

        }
    } 
});
Затем подключим его в шаблон:

Затем в шаблоне пропишем форму, к примеру:
<form action="" method="POST">
{% csrf_token %}
<input id="text-ajax" type="text" value="" />
<input id="clickme" type="button" value="Кликни меня" />
</form>
Далее подключим в шаблон следующий скрипт:
$(document).ready(function(){
    $('#clickme').click(function(){
 $.ajaxSetup({
     success: function(data){
  data = $.parseJSON(data);
                alert(data['new-text']);
            }
         });
       $.post('/ajax/test/', {'text': $('#test-ajax').val()});
});

При нажатии на кнопку мы перевернем текст введенный в текстовое поле уже с помощью django. Все, с клиентской частью покончено. Теперь нам нужно написать вьюху, которая наш запрос обработает. В views.py пишем:
from django.utils import simplejson
###simplejson обработывает словарь в json объект
def ajax_test(request):
    context = {}
    try:
        data = request.POST['text'].strip()
    except:
        context['text'] = 'error'
    else:
        context['text'] = data[::-1]
    return HttpResponse(context)
И добавляем url в urls.py
    url(r'^ajax/test/$', ajax_test),
Всё! Django теперь получит запрос по ajax. Вводим в строку в поле и при нажатии на кнопку получаем alert с этой строкой перевернутой задом наперед. А, да! Не забудьте передать в шаблон с формой context_instance. Например, если для генерации шаблона вы используете render_to_response, то выглядеть это будет так:
        return render_to_response('template.html', {}, context_instance=RequestContext(request))
Это нужно для того, что бы сформировался csrf_token в шаблоне. Вот и все, пока для связки django+ajax jquery я нахожу самым удобным.

11 комментариев:

  1. Анонимный24 июля 2013 г., 16:27

    Непонятно пишите...

    ОтветитьУдалить
  2. Что именно не понятно? Буду рад более конкретным замечаниям ;-)

    ОтветитьУдалить
    Ответы
    1. Подскажите советом ,может кусочком кода : имеется вьюшки http://paste.ubuntu.com/5984016/ я не доконца уверен корректно ли они работают :). А если корректно , то реально ли использовать описанное в статье для получения json объекта из джанго в ajax , чтобы потом запускался js скрипт?

      Удалить
    2. Возвращает оно правильно. После parseJSON это будет json-объект. Правда последнюю вьюху можно укоротить, но тут уже сами подумайте как)

      Удалить
  3. Можно ли связать django+ajax без POST и GET?

    ОтветитьУдалить
  4. Вот список методов: http://ru.wikipedia.org/wiki/HTTP#.D0.9C.D0.B5.D1.82.D0.BE.D0.B4.D1.8B
    Каждый можно реализовать.

    ОтветитьУдалить
  5. нерабочий гайд

    ОтветитьУдалить
  6. Анонимный19 июня 2014 г., 16:04

    Vyacheslav Koslov, а как вам не понять, что здесь непонятного ?

    Давайте выяснять:

    Подключаем её в шаблоне
    1

    ...

    Затем подключим его в шаблон:
    1

    И вот же вопрос - в тот же шаблон или другой? Если другой то какой, если тот же, то как строка может быть номером 1 и там и там и есчё где то там?

    Понимать (за что жас уважаем) - это хорошо. А уметь понятливо обьяснять для непонимающих (здесь увы пока незачто уважать) это искуство.

    ОтветитьУдалить
    Ответы
    1. Насчет этот или другой шаблон, Вы правы. А нумерация строк идет относительно текущего куска кода, а не общего шаблона, плагин который подсвечивает строки я не переписывал. Если буду писать еще подобные статьи - буду выкладывать примеры исходников в архиве. Что бы сразу "на примере".

      Удалить
    2. Насчет этот или другой шаблон, Вы правы. А нумерация строк идет относительно текущего куска кода, а не общего шаблона, плагин который подсвечивает строки я не переписывал. Если буду писать еще подобные статьи - буду выкладывать примеры исходников в архиве. Что бы сразу "на примере".

      Удалить