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 ?
<head>
(é um documento completo)? Ou é somente um trecho do HTML? Na página que o usuário submete a resposta, você tem algumadiv
que pode ser usada para inserir o HTML respondido pelo servidor? Ou você realmente deseja trocar o conteúdo todo da página?location
.