Atribuindo valores do http.response para variáveis Json
Estou fazendo um requisição HTTP e de retorno recebo um Json! Então eu quero pegar esse valor de Json e atribuir a outra variável para poder modificá-la e depois exibir as duas lado a lado para comparar. Então me deparei com 2 problemas o primeiro é que não estou conseguindo atribuir o valor httpRequest.responseText a uma variável, já tentei a função eval() e a toString() e quando eu peço para printar com um alert() para verificar me retorna undefined o segundo problema é que eu estava exibindo o resultado na dom por meio de appendChild(), estou exibindo apenas com os valores originais para teste, mas quando ele executa esse trexo do code, ele printa na dom e logo em seguida retira da dom, tipo uma piscadinha rápida. Ficaria grato se me ajudassem a resolver esse problema.
o Json que ele recebe de uma pagina .html é esse:
{"numero_casas":9,"token":"68c56aa784fe216ae92720b76386ea0995055074","cifrado":"fqnw rw mxdkc, unjen rc xdc. sxbqdj kuxlq","decifrado":"","resumo_criptografico":""}
o Script esta assim:
var httpRequest
function request(){
var url = 'test.html'//apagar depois
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest()
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance')
return false
}
httpRequest.onreadystatechange = alertContents
httpRequest.open('GET', url, true)
httpRequest.responseType = 'jason'
httpRequest.send()
httpRequest.onload = function(){
view(httpRequest)
}
}
function alertContents() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText)
} else {
alert('There was a problem with the request.')
}
}
}
function view(httpRequest){
var resposta = httpRequest.responseText.toString()
alert(resposta.value)
var box = document.querySelector('div#decoding')
box.setAttribute('class', 'shadow')
var challenge = document.createElement('fieldset')
challenge.setAttribute('class', 'painting')
var legendChallenge = document.createElement('legend')
legendChallenge.innerHTML = 'Challenge'
challenge.innerHTML = `Número de casas: ${httpRequest.response.numero_casa}<br>
Token: ${httpRequest.response.token}<br>
Cifrado: ${httpRequest.response.cifrado}<br>
Decifrado: ${httpRequest.response.decifrado}<br>
Resumo Criptografico: ${httpRequest.response.resumo_criptografico}`
var answer = document.createElement('fieldset')
answer.setAttribute('class', 'painting')
var legendAnswer = document.createElement('legend')
legendAnswer.innerHTML = 'Answer'
answer.innerHTML = `Número de casas: ${httpRequest.response.numero_casas}<br>
Token: ${httpRequest.response.token}<br>
Cifrado: ${httpRequest.response.cifrado}<br>
Decifrado: ${httpRequest.response.decifrado}<br>
Resumo Criptografico: ${httpRequest.response.resumo_criptografico}`
box.appendChild(challenge)
box.appendChild(answer)
challenge.appendChild(legendChallenge)
answer.appendChild(legendAnswer)
}
Index.html:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Caesar cipher</title>
</head>
<body>
<header>
<h1>Caesar cipher</h1>
</header>
<section>
<div class="container">
<div class="box">
<div class="form">
<form action="">
<div>
<fieldset class="shadow">
<legend><h1>Decoding</h1></legend>
<button id="btntoken" onclick="request()">Fetch Encryption Challenge</button>
</fieldset>
</div>
<div id="decoding" class="aling"></div>
</form>
</div>
</div>
</div>
</section>
<footer>
</footer>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
e o style.css para dar sentido as class:/zerando margein e padding de todos os elementos/
*{
margin: 0;
padding: 0;
}/definido estilo padrão/
body{
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
background-color: #F5F6FA;
}/Estilização e alinhamento do cabeçario/
header{
background-color: #22212F;
color: #FFF;
height: 80px;
font-size: 24px;
align-items: center;
display: flex;
padding-left: 15px;
}/Alinhamento das tags presentes na section/
section,div.form{
display: flex;
justify-content: center;
}div.container{
margin:5px;
width: 800px;
background-color: #FFF;
padding: 15px;
margin-top: 20px;
}div.parag,div.box{
display: block;
}div.form{
margin-top:30px;
}p{
margin-top: 10px;
}/estilização do formulario principal/
.shadow{
box-shadow: 5px 5px 5px 2px #22212F;
}fieldset{
width: 500px;
min-height:150px;
padding: 10px;
}legend{
font-size: 20px;
}input#token{
font-size: 16px;
width: 350px;
height: 30px;
}button#btntoken{
margin: 5px;
margin-top:15px;
width:480px;
height: 50px;
font-size: 24px;
}/estilização da resposta ao usuário/
.aling{
margin: 20px;
}
.painting{
display: inline-block;
width: 230px;
min-height: 100px;
}Discussão (2)
Carregando comentários...