Re: Ajax com JSON
Wilton José Pereira dos Santos <
wiltonj@...>
2008-02-25 04:43:58 GMT
Ola Mayron,
Vamos ver se consigo montar alguma coisa simples porem completa. Não vai
dar para testar vai ser de cabeça mesmo, ok?
Suponha o seguinte HTML. Voce digita no input-text a sigla de uma
unidade da federação e uma rotina ajax (jQuery) executa uma view que
retorna o nome da UF no formato JSON, em seguida a rotina javascript
popula os span's (sigla e nome) com os valores retornados.
<html>
<head>
<script type="text/javascript" src="/recursos/js/jquery.js"></script>
<script type="text/javascript">
/* A rotina $(document).ready(...) é executada
após a página ser carregada.
*/
$(document).ready(function() {
/* Define o handler para o evento click do botão
cujo id é igual a "busca".
*/
$("#busca").click(clickBntBusca);
});
function clickBntBusca(evento) {
/* Cria o objeto "dados" com a propriedade sigla_uf
que contém o valor do input com id igual a "sigla_uf".
*/
dados = { sigla_uf: $("#sigla_uf").val() }";
/* Executa uma chamada remota ajax.
O jQuery possui outros métodos para fazer chamadas
remotas, por exempo: $.load, $.post, $.get
ou $.getJSON.
Em alguns casos eu prefiro usar o método $.ajax, pois ele
permite fazer tratamento de erro.
*/
$.ajax({
type: "POST", // Método
url: "/teste/busca_nome_uf/", // View a ser executada
data: dados, // Dados a serem enviados
success: sucessoAjax, // Função a ser exec. em
caso de sucesso.
error: erroAjax, // Função a ser exec. em
)}; // caso de erro.
}
/* É executada se a chamada ajax terminar com sucesso.
Recebe a resposta da view no formato JSON.
{"uf": [{"nome": "Distrito Federal", "sigla": "DF"}]}
*/
function sucessoAjax(resposta) {
/* eval vai converter a resposta num objeto
*/
var dadosJSON = eval(' + resposta +');
/* Atualiza os span's com os valores recebidos
da view.
*/
$('#sigla').val(dadosJSON.uf[0].sigla);
$('#nome').val(dadosJSON.uf[0].nome);
}
function erroAjax(XMLHttpRequest, textStatus, errorThrown) {
/* Fazer o tratamento de erro.
}
</script>
</head>
<body>
<label for="sigla_uf">Sigla UF:</label>
<input type="text" name="sigla_uf" id="sigla_uf" value=" /><br/>
<input type="button" id="busca" value="Busca Nome" /><br/><br/>
Sigla: <span id="sigla"></span><br/>
Nome: <span id="nome"></span>
</body>
</html>
Para esse exemplo a view é bem simples:
def busca_nome_uf(request):
sigla_uf = request.POST.get('sigla_uf')
resposta = simplejson.dumps({"uf": [u.__dict__ for u in
UnidadeFederacao.objects.filter(sigla=sigla_uf)]})
return HttpResponse(resposta, mimetype="text/javascript")
É isso, por favor, me desculpe se tiver algum erro, realmente não testei
e o sono já está pegando... hehehe. Alem disso, para falar a verdade nem
sei se é a melhor maneira, simplesmente é como eu faço na minha
aplicação. Se alguém tiver uma melhor aceitamos sugestões... :D
[]s
Wilton
Em Dom, 2008-02-24 às 11:45 -0300, MAYRON escreveu:
> Wilton, poderia disponibilizar um exemplo melhor (se possível
> explicar) o uso do simplejson com o django?
> Se não for pedir D+ é claro :D
>
>
> --
> Mayron Cachina Santiago
> http://cachina.wordpress.com
> >
--~--~---------~--~----~------------~-------~--~----~
Grupo "Django Brasil" em Grupos do Google.
http://groups.google.com.br/group/django-brasil
-~----------~----~----~----~------~----~------~--~---
Atenciosamente,
Charleno Pires
Desenvolvedor Web
Teresina- Piauí
Gtalk: 
RSS Feed