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.