Requisitando dados de endereço com Javascript

Gunnar CorreaGunnar Correa11/03/2018 às 01:57:20 - 8.747 acessos

Consumimos uma API de CEP usando requisições Ajax para preencher nosso formulário.


É muito comum quando vamos nos cadastrar em algum site, e temos que preencher os dados de endereço, como nome, número, cidade e estado. Normalmente estes formulários tem um recurso que quando informado o CEP, ele preenche os demais campos, assim facilitando a vida do usuário e agilizando o seu cadastro. Neste artigo você confere duas videoaulas na qual criamos uma requisição do site viacep.com.br, onde ele nos retorna os dados de endereço para que possamos inseri-los nos campos do nosso formulário.

 

Requisitando dados de endereço com Javascript - Configurando o projeto

 

Requisitando dados de endereço com Javascript - Requisitando dados na API

Os algoritmos criados durante as aulas estão disponíveis abaixo. Não se esqueça de importar o jQuery para o seu pacote.

index.html

<title>Buscar CEP com Javascript</title>
<meta charset="utf-8">
<style>
    *{
        font-family: segoe ui;
    }
     
    label{
        display: table;
        padding: 10px;
    }
     
    input{
        padding: 5px;
    }
     
    input[type="text"]{
        max-width:400px;
        width:100%;
    }
</style>
 
 
<div>
    <p>Informe o CEP para que possamos processar de forma automática as demais informações.</p>
    <label>CEP: <input type="text" id="txtCep"></label>
    <label>Cidade: <input type="text" id="txtCidade"></label>
    <label>Estado: <input type="text" id="txtEstado"></label>
    <label>Bairro: <input type="text" id="txtBairro"></label>
    <label>Rua: <input type="text" id="txtRua"></label>
    <label>Complemento: <input type="text" id="txtComplemento"></label>
</div>      
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>

script.js

$(document).ready(function(){
	$("#txtCep").focusout(function(){
			var cep = $("#txtCep").val();
			cep = cep.replace("-", "");

			var urlStr = "https://viacep.com.br/ws/"+ cep +"/json/";
		
			$.ajax({
				url : urlStr,
				type : "get",
				dataType : "json",
				success : function(data){
					console.log(data);
					
					$("#txtCidade").val(data.localidade);
					$("#txtEstado").val(data.uf);
					$("#txtBairro").val(data.bairro);
					$("#txtRua").val(data.logradouro);
					$("#txtComplemento").val(data.complemento);
				},
				error : function(erro){
					console.log(erro);
				}
			});
	});
});

Por hora é isso, nos vemos na próxima.



api cep busca cep api javascript javascript com ajax busca cep com javascript formulário endereço endereço com js endereço js ajax js desenvolvimento de site programação client side

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários