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:<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:*{
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. }.aling{ margin: 20px. }.painting{ display: inline-block. width: 230px. min-height: 100px. }Discussão (2)
Carregando comentários...