2
respostas

Problemas com XMLHTTPRequests Chrome

Caros senhores, não sei se já foi abordado mas ocorreu um erro ao tentar "mandar" o request para o browser em questão, com uma rápida "googlada" descobri que faltava um "event.preventDefault();" dentro do function do trecho de código abaixo. Seria legal colocar isso na descrição da vídeo aula em questão 01 introdução ao AJAX somente como uma pequena observação caso a galera comece a esbarrar nesse erro. Grato pela atenção e espero ter ajudado a alguém que tenha agarrado nessa parte.

// buscar-pacientes.js

var botaoAdicionar = document.querySelector("#buscar-pacientes");

botaoAdicionar.addEventListener("click", function(event) {
    var xhr = new XMLHttpRequest();
    event.preventDefault(); // evitar bug no chrome
    xhr.open("GET", "https://api-pacientes.herokuapp.com/pacientes");

    xhr.addEventListener("load", function() {
        var resposta = xhr.responseText;
        console.log(resposta);
    });

    xhr.send();
});
2 respostas

Fala Tiago,

Tranquilo?

Apenas como complemento, na verdade não é bem um bug, pois depende do tipo do botão que você criou, se for um <button type="submit">Enviar</button> ele irá executar o comportamento padrão do botão, que é submeter o formulário, quando para estes casos de botão adicionamos um evento no click, precisamos usar o event.preventDefault(); pois ele irá (traduzindo literalmente) prevenir o comportamento padrão do seu elemento, se você criasse um <button type="button></button>

Como pode ser visto no exemplo que criei abaixo

Link - CodePen

Luiz muito obrigado pelo complemento, entendi a explição em questão. Grato pela exemplificação!!!