Blog do MX Cursos

Consultar CEP com Ajax utilizando jQuery

Consultar CEP com Ajax utilizando jQuery

Ao desenvolvemos qualquer tipo de aplicação onde usuário precise preencher o endereço, devemos nos atentar com a facilidade automatização para não tornar este processo desagradável. Uma forma de amenizar esse processo pra usuário é retornar essas informações de forma automática a partir da inclusão do CEP.

Ao digitar o CEP, os demais campos do endereço são preenchidos automaticamente. Mas como isso seria possível?

Os correios possuem uma API (Application Programming Interface). Trata-se de um conjunto de rotinas e padrões de programação para acesso a um aplicativo de software ou plataforma baseado na Web.

Entretanto, é preciso primeiro saber onde iremos realizar essa consulta.

Neste tutorial iremos utilizar esta API dos correios: https://correiosapi.apphb.com

Nossa estrutura de arquivos e pastas para esse tutorial ficará assim:

  • js/
    • cep.js
  • index.html

Iremos utilizar também para estilização do formulário o Bootstrap do Twitter, e para consulta utilizaremos o jQuery.

jqueryVamos criar nossa estrutura html, no arquivo index.html:

Nossos cursos indicados

<!doctype html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title>Consultar CEP via AJAX com jQuery</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
	<div class="container">
		<div class="page-header">
			<h1 class="text-center">Consultar CEP via Ajax com jQuery</h1>
		</div>
		<form class="form-horizontal">
			  <div class="form-group">
				<label for="cep">CEP</label>
				<input type="text" class="form-control" name="cep" placeholder="CEP" />
			  </div>
			  <div class="form-group">
				<label for="rua">Rua</label>
				<input type="text" class="form-control" name="rua" placeholder="Rua" />
			  </div>
			  
			  <div class="form-group">
				<label for="rua">Bairro</label>
				<input type="text" class="form-control" name="bairro" placeholder="Bairro" />
			  </div>
			  
			   <div class="form-group">
				<label for="cidade">Cidade</label>
				<input type="text" class="form-control" name="cidade" placeholder="Cidade" />
			  </div>
			  
			  <div class="form-group">
				<label for="uf">Estado (UF)</label>
				<input type="text" class="form-control" name="uf" placeholder="Estado" />
			  </div>		  
		</form>
	</div>	
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script type="text/javascript" src="js/cep.js"></script>	
</body>
</html>

Explicando o código acima:

  • Na linha 6, chamamos o arquivo bootstrap.min.css, de uma CDN, para realizar estilização do formulário;
  • Na linha 13 a 37, criamos um formulário comum, apenas com a estrutura para utilizar o estilo do Bootstrap;
  • Na linha 39 a 40, chamamos o jQuery do CDN e também o script cep.js, que irá conter a consulta à API.
Leia também  Criando um carrinho de compras com PHP – Parte 3

Agora iremos ao arquivo cep.js

$(document).ready(function(){
	$("input[name=cep]").blur(function(){
		var cep = $(this).val().replace(/[^0-9]/, '');
		if(cep){
			var url = 'https://correiosapi.apphb.com/cep/' + cep;
			$.ajax({
                    url: url,
                    dataType: 'jsonp',
                    crossDomain: true,
                    contentType: "application/json",
					success : function(json){
						if(json.logradouro){
							$("input[name=rua]").val(json.logradouro);
							$("input[name=bairro]").val(json.bairro);
							$("input[name=cidade]").val(json.cidade);
							$("input[name=uf]").val(json.estado);
						}
					}
			});
		}					
	});	
});

Explicando o código acima:

  • Na linha 1, inicia o jQuery para iniciar depois de carregar o DOM;
  • Na linha 2, seleciona input cujo o name CEP atribui o evento blur e será executa uma função, caso clique fora do campo selecionado;
  • Na linha 3, criamos uma variável cep, que recebe o valor do CEP e remove tudo diferente de 0-9, usando replace;
  • Na linha 4, verificamos se tem algum valor na variável cep para dar continuação ao script;
  • Na Linha 5, criamos a variável url que define onde será feito a requisição, passando o CEP para API;
  • Na linha 6 chamamos o evento $.ajax;
  • Na linha 7, definimos a url da requisição;
  • Na linha 8, definimos o tipo de dados que você espera do retorno, no nosso caso o JSONP;
  • Na linha 9, permitimos o redirecionamento ao realizar a requisição;
  • Na linha 10, informamos o tipo de conteúdo que será enviado na requisição;
  • Na linha 11 a 18, resgatamos o retorno se for com sucesso e atribuímos a cada item do formulário o valor retornado.

Para ver o funcionamento do script:

https://blog.mxcursos.com/exemplos/cep

Para baixar o script criado no tutorial:

https://github.com/davidchc/tutorial-consultar-cep-ajax

Gostou do artigo? Compartilhe!

Se tiver quaisquer dúvidas, é só deixar um comentário.

QUER POTENCIALIZAR SUAS HABILIDADES EM SOFTWARES E SEGMENTOS DO PRESENTE E DO FUTURO?

CURSOS ONLINE