Ajax no Django com jQuery
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 será usado para enviar a requisição e interpretar o retorno em formato json dos dados.
Vamos a prática, o link para download do código fonte está 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 mágica 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”, esta 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://www.kenjiyamamoto.com/blog/files/DjangoAjax.zip