Ajax no Django com jQuery

Postado em: Outubro 2, 2008
Tags: django, python

Como usar Ajax com o Django? Essa é uma grande pergunta principalmente para os iniciantes. Usar Ajax juntamente com o Django é muito simples como praticamente tudo neste framework.
O que irei usar aqui é o framework JavaScript chamado jQuery que sera usado para enviar a requisição e interpretar o retorno em formato json dos dados.
Vamos a pratica, o link para download do código fonte esta no final do artigo.
Crie um projeto novo:
django-admin.py startproject DjangoAjax

Dentro da pasta do projeto crie uma aplicação:
python manage.py startapp contatos

Ainda dentro da pasta do projeto crie os seguintes diretórios:
/media
|---/js
/templates

Dentro da pasta /media/js/ coloque o arquivo do jquery que pode ser baixado em http://jquery.com/ [jquery.com].
Não vou explicar aqui a parte de configuração do settings.py tendo em vista que basta algumas alterações simples e rotineiras como configurar o banco e a app instalada, e baixando o código fonte de exemplo você poderá ver como foi configurado o projeto.
Vamos ao models.py da aplicação “contatos”:

from django.db import models

class Contatos(models.Model):
    nome = models.CharField('Nome', max_length=40)
    telefone = models.CharField('Telefone', max_length=15, blank=True)
    celular = models.CharField('Celular', max_length=15, blank=True)
    email = models.CharField('E-mail', max_length=40, blank=True)
    
    class Meta:
        db_table = 'contatos' #define o nome da tabela no banco
        
    def __unicode__(self):
        return self.nome

Criada a classe Contatos e rodado o syncdb vamos ao nosso arquivo views.py:

# -*- coding: utf-8 -*-
from django.core import serializers
from django.http import HttpResponse
from django.shortcuts import render_to_response
from DjangoAjax.contatos.models import Contatos

def index(request):
    return render_to_response('index.html',)

def get_contatos(request):
    contatos = Contatos.objects.all()
    retorno = serializers.serialize("json",  contatos)
    return HttpResponse(retorno, mimetype="text/javascript")

Assim como o models, o views é muito simples, e apenas com a função “get_contatos” já temos como realizar a magica do ajax com ou sem o framework jquery ou usando um outro framework de javascript que preferir.
O que fazemos na função “get_contatos” nada mais é do que pegar todos os contatos da nossa tabela “Contatos” e usarmos o serializers do Django para transformar nossos dados em um formato json.
O serializers do django é um framework que traduz nossos objetos em um outro formato, são eles:
xml
json
python
yaml

Mais informações sobre o serializers pode ser encontrado aqui http://docs.djangoproject.com/en/dev/topics/serialization/?from=olddocs [docs.djangoproject.com].

Deixe seu arquivo urls.py assim:

from django.conf.urls.defaults import *
from django.contrib import admin
import os

BASEDIR = os.path.abspath(os.path.dirname(__file__))

admin.autodiscover()

urlpatterns = patterns('',
    (r'^admin/(.*)', admin.site.root),
    (r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': BASEDIR + '/media/'}),
    (r'^$', 'DjangoAjax.contatos.views.index'),
    (r'^get_contatos/$', 'DjangoAjax.contatos.views.get_contatos'),
)

A url media/ vai servir nossos arquivos estáticos, neste caso usaremos apenas o jquery.

Agora vamos olhar o nosso arquivo index.html que é usado em nosso views.py, vou mostrar ele em duas partes, o base.html é apenas um html base e não o mostrarei aqui sendo que ele pode ser visto nos fontes.

{% extends "base.html" %} 
{% block head %}
<script type="text/javascript">
    $(document).ready(function(){
        $("#btnContatos").click(function(){
            $.ajax({
                type: "GET",
                url: "/get_contatos/",
                dataType: "json",
                success: function(retorno){
                    $.each(retorno, function(i, item){
                        $("#corpoTabela").append('<tr>' +
                        '<td>' +
                        item.fields['nome'] +
                        '</td>' +
                        '<td>' +
                        item.fields['telefone'] +
                        '</td>' +
                        '<td>' +
                        item.fields['celular'] +
                        '</td>' +
                        '<td>' +
                        item.fields['email'] +
                        '</td>' +
                        '</tr>');
                    });
                }
            });
        });
    });
</script>
{% endblock %}

Esta primeira parte, é onde a mágica realmente começa a acontecer, o que temos aqui é uma função atribuída a ação de click do botão “btnContatos”, está função utiliza o recurso de ajax do jquery.
Vamos detalhar um pouco a função, vou direto para o “$.ajax”:

type: "GET"

– Determina o método http, GET, POST ...

url: "/get_contatos/"

- Nossa url declarada lá no urls.py

dataType: "json"

– O tipo de dados que a url vai retornar.

success: function(retorno){

- Caso tenhamos sucesso a função segue em frente.

$.each(retorno, function(i, item){

- Faz um laço e pega todos os itens do objeto “retorno”
Daqui em diante a tabela é montada usando o “append” para inserir as tags e os dados no html. Neste exemplo estou montando uma tabela mas você pode fazer o que quiser com os dados.

Agora a segunda parte, que nada mais é do que o html que vai receber os dados:

{% block conteudo %}
    <table id="contatos">
        <thead>
            <tr>
                <th>
                    Nome
                </th>
                <th>
                    Telefone
                </th>
                <th>
                    Celular
                </th>
                <th>
                    E-mail
                </th>
            </tr>
        </thead>
        <tbody id="corpoTabela">
        </tbody>
    </table>
    <input type="button" id="btnContatos" class="botao" value="Pegar Contatos">
{% endblock %}

Temos ali nosso botão que ao ser clicado chama a função atribuída ao evento click dele.
Pronto, era isso, muito fácil, prático e simples, com isso as possibilidades são enormes, você pode fazer muita coisa usando o jquery e o serializers do Django, agora o resto é com sua imaginação e criatividade.
Abraços e até a próxima!

Código fonte de exemplo: http://rfdev.org/blog_media/downloads/DjangoAjax.zip [rfdev.org]