Duvidas sobre o POST PREENCHENDO FORMULÁRIO em AJAX | JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por vitor

| 88.7k xp | 28 posts

Estou iniciando em JavaScript e não estou conseguindo fazer com que este código funcione alguém pode me explicar? Link do post: https://blog.alura.com.br/preenchendo-formulario-html-automaticamente-com-ajax/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax com JS Puro</title>
    <link href="asserts/stylesheets/stilize/stilize.min.css" rel="stylesheet" type="text/css">
</head>
<body>
    <form class="o-form">
        <div class="o-navbar--gary">Buscando CEP com requisição JAX</div>
        <div class="o-form__body o-form__body--padding">
            <div class="l-row">
                <div class="u-grid--2">
                    <label for="" class="o-form__text">CEP</label>
                    <div class="o-form__group">
                        <input class="o-form__data" name="cep" type="text">
                        <span class="o-form__groupElement"><button class="o-button--gary"><i class="icon-globe"></i></button></span>
                    </div>
                </div>
                <div class="u-grid--8">
                    <label for="" class="o-form__text">Endereço</label>
                    <input class="o-form__data" name="endereco" type="text">
                </div>
                <div class="u-grid--2">
                    <label for="" class="o-form__text">Numero</label>
                    <input class="o-form__data" name="numero" type="text">
                </div>
            </div>
            <div class="l-row">
                <div class="u-grid--8">
                    <label for="" class="o-form__text">Bairro</label>
                    <input class="o-form__data" name="bairro" type="text">
                </div>
                <div class="u-grid--4">
                    <label for="" class="o-form__text">Complemento</label>
                    <input class="o-form__data" name="complemento" type="text">
                </div>
            </div>
            <div class="l-row">
                <div class="u-grid--10">
                    <label for="" class="o-form__text">Cidade</label>
                    <input class="o-form__data" name="cidade" type="text">
                </div>
                <div class="u-grid--2">
                    <label for="" class="o-form__text">Estado</label>
                    <input class="o-form__data" name="estado" type="text">
                </div>
            </div>
        </div>
    </form>
</body>
</html>

<script>






function buscaCep() {
let inputCep = document.querySelector('input[name=cep]');
let cep = inputCep.value.replace('-', '');
let url = 'http://viacep.com.br/ws/' + cep + '/json';
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));
            console.log(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;
}

buscaCep();

</script>

3 respostas

por Mateus Rodrigues Costa

| 128.4k xp | 3 posts

07/08/2018

Fala, meu querido!

Seu código não está funcionando porque você declarou a função buscaCep() para iniciar logo que você carrega a página.

Dessa maneira, você faz a primeira solicitação com o servidor (viacep.com.br) sem nenhum CEP sendo adicionado na url (http://viacep.com.br/ws//json) e ai o servidor não encontra nada (o famoso 404).

Pra resolver isso, é só adicionar um EventListener() com a propriedade 'click' no botão do seu formulário. Esse método vai chamar a função buscaCep() somente quando o botão for clicado (depois de já ter digitado o CEP).

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

por vitor

| 88.7k xp | 28 posts

07/08/2018

Olá Mateus, Eu já tinha tentado desta forma. Adicionei este código que vc postou e ainda não deu certo. N sei se precisaria colocar um preventDefault pra visualizar o que esta acontecendo. Estou realmente sem saber o que fazer .

solução!

por Mateus Rodrigues Costa

| 128.4k xp | 3 posts

07/08/2018

Então Vitor, é verdade! Faltou colocar um event.preventDefault() logo no começo da função buscaCep.

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);

Testei aqui com esse código e funcionou!