Depois de um longo inverno estou voltando a escrever, e estou com algumas coisas na fila que devem sair em breve. Sem muita cerimônia, quero mostrar uma abordagem que me agrada de ajax com validação no VRaptor usando o jQuery.
O código é bem sucinto e simplório, somente com o necessário para falar do que quero. Primeiro a classe JsonController, com 2 métodos que serão acessados pelo client jQuery. Um deles ilustra uma requisição com sucesso e o outro uma requisição com erro.
import java.util.ArrayList; import java.util.List; import br.com.caelum.vraptor.Get; import br.com.caelum.vraptor.Path; import br.com.caelum.vraptor.Resource; import br.com.caelum.vraptor.Result; import br.com.caelum.vraptor.view.Results; @Resource public class JsonController { private Result result; public JsonController(Result result){ this.result = result; } @Get @Path("/json/erro") public void jsonErro(){ List<String> erros = new ArrayList<String>(); erros.add("Erro 1"); erros.add("Erro 2"); //Results.http() em vez de Status.badRequest(), pois este força uma página de erro, que ñ serve p/ um cliente ajax result.use(Results.http()).setStatusCode(400); result.use(Results.json()).from(erros, "erros").serialize(); return; } @Get @Path("/json/sucesso") public void jsonSucesso(){ List<String> strings = new ArrayList<String>(); strings.add("Texto 1"); strings.add("Texto 2"); result.use(Results.http()).setStatusCode(200); result.use(Results.json()).from(strings, "strings").serialize(); return; } }
Observação importante sobre o Controller: quem me conhece sabe da minha predileção por bons designs com REST, então neste exemplo essa premissa é seguida. O caso de sucesso retorna um HTTP 200 indicando o sucesso, e o caso de erro retorna HTTP 400 (Bad Request), indicando ao cliente que sua requisição tinha problemas que precisam ser corrigidos.
Ambos os casos retornam JSON para o cliente Ajax. No caso de sucesso o jQuery consome isto diretamente. No caso de erro o JSON com os erros será consumido do responseText do XmlHttpRequest.
Criei um HTML simples para teste, com 2 botões para gerar os requests ajax de sucesso e de erro.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Ajax com validação</title> </head> <body id="public"> <div id="container"> <h1 id="logo"></h1> <form id="teste-json" name="teste-json" enctype="application/x-www-form-urlencoded" method="post" action="/json/erro"> <div class="info"><h2>Teste JSON</h2></div> <div class="info"> <ul id="campos-cadastro"> <li class="buttons "> <div><input id="erro" name="erro" type="button" value="Teste Erro" /></div> </li> <li class="buttons "> <div><input id="sucesso" name="sucesso" type="button" value="Teste Sucesso" /></div> </li> </ul> </div> </form> </div> <img id="bottom" src="/images/bottom.png" alt="" /> <script type="text/javascript" src="/scripts/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/scripts/teste-json.js"></script> </body> </html>
Para completar, o javascript que trata do clique nos botões, faz os requests e consome o JSON de sucesso e o JSON com as mensagens de erro.
$(document).ready(function(){ $("input#erro").click(function() { $.ajax({ type: "GET", url: "/json/erro", dataType: "json", success: function(json){ for (var x = 0; x < json.erros.length; x++) { var erro = json.erros[x]; alert("Erro: " + erro); } } }); }); $("input#erro").ajaxError(function(e, xhr, settings, exception) { var errosStr = xhr.responseText; var json = eval("(" + errosStr + ")"); for (var x = 0; x < json.erros.length; x++) { var erro = json.erros[x]; alert("Erro: " + erro); } }); $("input#sucesso").click(function() { $.ajax({ type: "GET", url: "/json/sucesso", dataType: "json", success: function(json){ for (var x = 0; x < json.strings.length; x++) { var texto = json.strings[x]; alert("Texto: " + texto); } } }); }); $("input#sucesso").ajaxError(function(e, xhr, settings, exception) { var errosStr = xhr.responseText; var json = eval("(" + errosStr + ")"); for (var x = 0; x < json.erros.length; x++) { var erro = json.erros[x]; alert("Erro: " + erro); } }); });
I have to convey my affection for your kindness for people who absolutely need guidance on this important content. Your real commitment to passing the solution all around became wonderfully insightful and have specifically allowed guys and women just like me to get to their dreams. This warm and helpful guidelines implies a great deal to me and far more to my office colleagues. Best wishes; from everyone of us.
Ótimo post. Simples, objetivo e útil.
Parabéns.
Your Site Is Great, http://kimkardashiansextapet.webs.com/ kim kardashian sex tape discount, rmmynm,
Where it is possible to buy the, paris hilton sex tape, [url= http://parishiltonsextaped.webs.com/ ]paris hilton sex tape[/url], 056,
uUmtVreDj ugg boots outlet fAyiCmzPd http://peternorthcott.com