Exemplo com jQuery

Auto preenchimento de endereço via CEP usando jQuery e $.getJSON. Digite o CEP e ao sair do campo o endereço será preenchido.
Teste ao vivo

CEP:
Rua:
Bairro:
Cidade:
Estado:
IBGE:
Código fonte completo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Consulta de CEP - jQuery</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    * { box-sizing: border-box; font-family: system-ui, sans-serif; }
    body { max-width: 500px; margin: 40px auto; padding: 0 20px; }
    label { display: block; margin-top: 12px; font-size: 14px; color: #555; }
    input { width: 100%; padding: 8px 12px; margin-top: 4px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
    input:focus { outline: none; border-color: #7c3aed; }
    h1 { font-size: 20px; }
  </style>
</head>
<body>

<h1>Auto Preenchimento de Endereço via CEP</h1>
<p>Digite o CEP e ao sair do campo o endereço será preenchido automaticamente.</p>

<form>
  <label>CEP:
    <input type="text" id="cep" maxlength="9" placeholder="00000-000">
  </label>
  <label>Rua:
    <input type="text" id="rua" readonly>
  </label>
  <label>Bairro:
    <input type="text" id="bairro" readonly>
  </label>
  <label>Cidade:
    <input type="text" id="cidade" readonly>
  </label>
  <label>Estado:
    <input type="text" id="uf" readonly>
  </label>
  <label>IBGE:
    <input type="text" id="ibge" readonly>
  </label>
</form>

<script>
  $(document).ready(function () {
    function limparFormulario() {
      $("#rua").val("");
      $("#bairro").val("");
      $("#cidade").val("");
      $("#uf").val("");
      $("#ibge").val("");
    }

    $("#cep").blur(function () {
      var cep = $(this).val().replace(/\D/g, "");

      if (cep.length !== 8) {
        limparFormulario();
        return;
      }

      // Preenche com "..." enquanto consulta
      $("#rua").val("...");
      $("#bairro").val("...");
      $("#cidade").val("...");
      $("#uf").val("...");
      $("#ibge").val("...");

      $.getJSON("/ws/" + cep + "/json/", function (dados) {
        if (!("erro" in dados)) {
          $("#rua").val(dados.logradouro);
          $("#bairro").val(dados.bairro);
          $("#cidade").val(dados.localidade);
          $("#uf").val(dados.uf);
          $("#ibge").val(dados.ibge);
        } else {
          limparFormulario();
          alert("CEP não encontrado.");
        }
      });
    });
  });
</script>

</body>
</html>