1
resposta

Artigo preenchendo formulário HTML com AJAX

Oi galera, tudo bem? Estou estudando a formação FrontEnd e no progresso do curso fiz o exemplo deste artigo https://www.alura.com.br/artigos/preenchendo-formulario-html-automaticamente-com-ajax , mas não consegui o resultado esperado. Pesquisando aqui no fórum encontrei a solução, mas não consegui entender o que há de diferente entre o que fiz e a solução proposta no fórum. Meu código:

<script>

    function buscaCep(){
        event.preventDefault();
        let inputCep = document.querySelector('input[name=cep]');
        let cep = inputCep.value.replace('-','');
        let url = 'http://viacep.com.br/ws' + cep + '/json';
        console.log(url);
        let xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status = 200)
                    preencheCampos(JSON.parse(xhr.responseText));
            }  
        }
        xhr.send();
    };

    function preencheCampos(json) { 
        document.querySelector('input[name=endereco]').value = json.logradouro;
        document.querySelector('input[name=bairro]').value = json.bairro; 
        document.querySelector('input[name=complemento]').value = json.complemento;
        document.querySelector('input[name=cidade]').value = json.localidade; 
        document.querySelector('input[name=estado]').value = json.uf; 
    }

    const enviaDados = document.querySelector('button');
    enviaDados.addEventListener('click', buscaCep);

</script>

Solução proposta:

function buscaCep() {
    event.preventDefault();
    let inputCep = document.querySelector('input[name=cep]');
    let cep = inputCep.value.replace('-','');
    console.log(cep);
    let url = 'http://viacep.com.br/ws/'+cep+'/json';
    console.log(url);
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
          if (xhr.status = 200)
              preencheCampos(JSON.parse(xhr.responseText));
          }
      }
    xhr.send();
  };

  function preencheCampos(json) {
      document.querySelector('input[name=endereco]').value = json.logradouro;
      document.querySelector('input[name=bairro]').value = json.bairro;
      document.querySelector('input[name=complemento]').value = json.complemento;
      document.querySelector('input[name=cidade]').value = json.localidade;
      document.querySelector('input[name=estado]').value = json.uf;
  };

  const enviaDados = document.querySelector('button');
  enviaDados.addEventListener('click', buscaCep);

Li algumas vezes os dois código para compará-los e encontrar algum erro, mas não percebi o que possa ser. Provavelmente deve ser algo bem simples, mas por ser iniciante não tenha conseguido. Então se alguém conseguir me dar uma força, agradeço.

Ansioso pelas respostas, até mais.

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
1 resposta

Boa Tarde Alex,

Olhando os dois códigos a única coisa que notei que não tem no seu código é:

console.log(cep); /* na quinta linha */

o restante está ok.