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.

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.