Django com MySQL, JQuery, Ajax e JSON – Parte 1

By gustavohenrique|Django|13 Comments

Implementando Ajax usando JSON

Ajax é uma tecnologia que utiliza Javascript para enviar e receber dados à um servidor sem precisar atualizar a página em exibição no navegador, e JSON é um formato para troca de dados, onde os dados enviados são semelhantes à uma tupla, contendo uma chave e um valor. Pode-se utilizar ajax com outros formatos para troca de dados, mas vamos ficar com o JSON por ser mais simples de se trabalhar.
Primeiro vamos escrever nossa função javascript responsável por requisitar ao servidor as ruas cadastradas a partir do id do bairro fornecido, dentro do arquivo sigep.js. É uma função genérica que pode ser utilizada com outros elementos e outras tabelas. Lembrando que é extremamente necessário carregar a biblioteca JQuery no código do template antes de usar a função abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/**
 * @param string url - URL que processara a requisicao do cliente
 * @param string objHtmlReturn - ID do objeto HTML onde sera exibido o resultado
 * @param int id - Valor enviado como base para obter um retorno
 */
function comboAjax(url,objHtmlReturn,id)
{
  // Cria uma variável dados em formato JSON, com 1 chave e 1 valor
  dados = {'id':id};
 
  // É inserido um elemento option dentro do elemento select
  $("#"+objHtmlReturn).html('<option value="0">Carregando...</option>');
  $.ajax({
      type: "POST",
      url: url,
      dataType: "json",
      data: dados,
      success: function(retorno){
          $("#"+objHtmlReturn).empty();
          $.each(retorno, function(i, item){
              $("#"+objHtmlReturn).append('<option value="'+item.pk+'">'+item.fields[fieldreturn]+'</option>');
 
          });
      },
      error: function(erro) {
        alert('Erro. Sem retorno da requisicao.');
      }
  });
}

Modificaremos o elemento select dentro do template clienteform.html de modo a usar a função acima. Atualmente está declarado assim:

1
2
3
4
5

<select name="bairro" id="id_bairro">
  {% for b in bairros %}
    <option value="{{b.id}}">{{b.bairro}}</option>
  {% endfor %}
</select>

Alterando para incluir o evento onchange():

1
2
3
4
5

<select name="bairro" id="id_bairro" onchange="comboAjax('/cliente/getlogradouros/','id_logradouro',this.value);">
  {% for b in bairros %}
    <option value="{{b.id}}">{{b.bairro}}</option>
  {% endfor %}
</select>

Quando for selecionado um bairro, será disparado o evento onchange(), chamando a função comboAjax(), que enviará uma requisição à view /cliente/getlogradouros, que por sua vez fará uma consulta ao banco de dados retornando todos os logradouros a partir do id do bairro fornecido e exibindo o resultado no elemento select com id='id_logradouro'.
Vamos escrever a view responsável por tratar nossa requisição ajax. No arquivo views.py:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

from django.core import serializers
from django.utils import simplejson
 
def getlogradouros(request):
  if request.method == 'POST':
    id = request.POST.get('id');
    lista = Logradouro.objects.filter(bairro=id)
    if lista.count() > 0:
      json = serializers.serialize("json",lista)
    else:
      lista = [{"pk":"0","fields":{'logradouro':"Nenhum registro"}}]
      json = simplejson.dumps(lista)
    return HttpResponse(json,mimetype="application/json")
getlogradouros = login_required(getlogradouros)

E para finalizar, vamos mapear a URL alterando o urlpatterns no arquivo urls.py:

1

(r'^cliente/getlogradouros/$','sigep.cliente.views.getlogradouros'),

Conclusão

Esse artigo não visa discutir assuntos relacionados à engenharia de software, modelagem de dados e orientação à objetos. Nada disso foi analisado no processo de desenvolvimento visto que foge do objetivo de ser apenas uma apresentação rápida sobre o framework. Django possui recursos fantásticos e tem tudo para estar entre os grandes.
Desenvolvemos uma aplicação simples para cadastro de clientes, com uma interface horrível e um bug ao tentar editar os dados do cliente. A questão da interface pode ser resolvida com uso de css e javascript, e quanto ao bug vou deixar como exercício para vocês tentarem resolver. O bug aparece quando tentamos editar o cliente – não mostra o endereço. O correto seria exibir todos os bairros e logradouros cadastrados e aparecer selecionados àqueles que compõem o endereço do cliente.
Em breve estarei disponibilizando mais artigos de modo a completar o sistema.
Dúvidas e sugestões serão bem-vindas.

Bookmark It