0

Estou criando um site de enigmas em que a cada enigma, o usuário deverá inserir uma resposta no prompt e essa resposta será enviada ao servidor por requisição POST com a função fetch.

No lado do servidor, a resposta será verificada e caso ela esteja correta, eu retorno uma nova página HTML contendo um novo enigma. Caso a reposta do usuário esteja errada, o servidor retorna o código 403 para dizer que era uma resposta errada.

Já no lado do cliente, eu quero verificar se a resposta era certa ou errada. Se a resposta for incorreta será emitido um alert e se a resposta estiver certa, eu quero que o navegador renderize a nova página enviada pelo servidor.

O problema é que eu não sei como faço para redirecionar o cliente para essa página que o servidor enviou.

O que eu estava fazendo antes era escrever o texto recebido com o document.write, mas chega uma hora que não dá certo pois o conteúdo dos arquivos se acumulam na página.

function sendAnswer(){

    const answer = prompt("Digite sua resposta:").toLowerCase();
    if(!answer){return;}

    fetch("/", {
        method: "post",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({answer: answer, fase: sessionStorage.fase})

    }).then(function(response){

        if (response.status != 200){
            alert("Resposta Errada!");
            return;
        }

        response.text().then(function(text){
            document.write(text);
        });
                    
    });
}

O que eu quero é mudar o conteúdo da página por completo pelo arquivo HTML recebido do servidor. Como posso fazer isso ?

2
  • O HTML que o servidor retorna contém um <head> (é um documento completo)? Ou é somente um trecho do HTML? Na página que o usuário submete a resposta, você tem alguma div que pode ser usada para inserir o HTML respondido pelo servidor? Ou você realmente deseja trocar o conteúdo todo da página? Commented 10/04/2020 às 23:25
  • É um documento completo. Eu gostaria de trocar todo o conteúdo da página como se eu estivesse fazendo um redirecionamento com o location. Commented 10/04/2020 às 23:26

1 Resposta 1

1

Por este trecho:

O que eu estava fazendo antes era escrever o texto recebido com o document.write, mas chega uma hora que não dá certo pois o conteúdo dos arquivos se acumulam na página.

Creio que você conseguiu trocar o conteúdo da página pela resposta da requisição assíncrona. O seu problema então deve ser como limpar o documento antes de executar um outro document.write. Nesse caso, basta utilizar antes do document.write, o método document.open, que remove todos os nós do DOM presentes no documento.

Algo assim:

response.text().then(function(text) {
  document.open();
  document.write(text);
});

Veja exemplos similares. Primeiro, sem o document.open:

setInterval(() => {
  document.write(Date.now() + '<br />');
}, 750);

Com o document.open antes do document.write:

setInterval(() => {
  document.open();
  document.write(Date.now() + '<br />');
}, 750);

3
  • Obrigado Luiz, isso funcionou mas é possível adicionar na resposta como fazer isso só que sem apagar o arquivo anterior? Tipo assim, quando o usuário clicar no botão de voltar (setinha para esquerda do navegador) ele ir para a página anterior (antes da página recebida do fetch). Commented 10/04/2020 às 23:38
  • Quando você usa o document.write você não há como recuperar o estado anterior da página (não é uma nova página, é a mesma página, só que sobrescrita). O único meio de poder "voltar à página anterior" seria armazenar o HTML atual em uma variável antes de alterá-lo. Commented 10/04/2020 às 23:39
  • Ao que me parece, talvez seja mais interessante no seu caso não utilizar AJAX nesse caso, mas sim requisições POST por <form>. Elas te permitem a mudança da página muito mais facilmente, além de permitirem, de fato, voltar à página anterior. Commented 10/04/2020 às 23:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .