Tenho um formulário HTML que filtra uma lista de resultados em uma div.
O que eu quero é que apenas o conteúdo do div seja recarregado em vez da página inteira, e usando apenas JavaScript puro.
Isto é o que tenho até agora e não está retornando os resultados filtrados:
document.querySelector('form[name="filters"]').addEventListener('submit', function (e) {
e.preventDefault();
var xhttp = new XMLHttpRequest();
var action = document.querySelector('form[name="filters"]').getAttribute('action');
var list = document.querySelector('.list');
xhttp.responseType = "document";
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
list.innerHTML = this.response.querySelector('.list').innerHTML;
};
};
xhttp.open("POST", action, true);
xhttp.send();
});
O problema com sua implementação XMLHttpRequest atual é que você está fazendo uma solicitação POST, mas não está realmente enviando os dados do formulário. Isso significa que seu servidor não tem ideia de quais filtros você está aplicando, então ele está apenas retornando os resultados padrão em vez dos filtrados.