Requisitando dados de endereço com Javascript

É 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.