App Pesquisa Endereço

Digite o cep na caixa CEP e clique com o mouse em qualquer lugar fora dessa caixa.

Um excelente exemplo de integração entre página web e uma web-api. Muito simples de usar.

CEP:
Logradouro:
Bairro:
Cidade:
UF:


Código

    <script>
        function getDadosEnderecoPorCEP(cep) {
            let url = 'https://viacep.com.br/ws/' + cep + '/json/unicode/'

            let xmlHttp = new XMLHttpRequest()
            xmlHttp.open('GET', url)

            xmlHttp.onreadystatechange = () => {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    let dadosJSONText = xmlHttp.responseText
                    let dadosJSONObj = JSON.parse(dadosJSONText)

                    document.getElementById('endereco').value = dadosJSONObj.logradouro
                    document.getElementById('bairro').value = dadosJSONObj.bairro
                    document.getElementById('cidade').value = dadosJSONObj.localidade
                    document.getElementById('uf').value = dadosJSONObj.uf

                }
            }
            xmlHttp.send()
        }
    </script>


        <p>
            Digite o cep na caixa CEP e clique com o mouse em qualquer lugar fora dessa caixa.
        </p>
        <div class="row form-group">
            <div class="col-sm-3">
                CEP:<input type="text" class="form-control" placeholder="CEP" onblur="getDadosEnderecoPorCEP(this.value)" />
            </div>
            <div class="col-sm-9">
                Logradouro:<input type="text" class="form-control" placeholder="Endereço" readonly id="endereco" />
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm-6">
                Bairro:<input type="text" class="form-control" placeholder="Bairro" readonly id="bairro" />
            </div>
            <div class="col-sm-4">
                Cidade:<input type="text" class="form-control" placeholder="Cidade" readonly id="cidade" />
            </div>

            <div class="col-sm-2">
                UF:<input type="text" class="form-control" placeholder="UF" readonly id="uf" />
            </div>
        </div>