Jump to content
Filhote de Dev

Atribuindo valores do http.response para variáveis Json

Recommended Posts

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;
}

Share this post


Link to post
Share on other sites

@Filhote de Dev 

 

Bom amigo isso que eu vou falar e chato porem, é necessário. Seu código está muito bagunçado, ele está meio confuso.

 

Tem um problema no elemento form. Quando você não definir um tipo para o botão que está dentro de um elemento form, ele por padrão vai ser do tipo submit e quando o usuário clicar nele, ele vai disparar o evento submit do form, assim o form vai fazer uma request para a mesma página recarregando a página e perdendo a chama do método request().

 

Para resolver isso basta definir um tipo para o botão e bloquear o evento de submit do form.

<form onsubmit="return false">
<button type="button" id="btntoken" onclick="request()">Fetch Encryption Challenge</button>

 

O form vai ficar assim:

<form onsubmit="return false">
	<div>
		<fieldset class="shadow">
			<legend><h1>Decoding</h1></legend>
			<button type="button" id="btntoken" onclick="request()">Fetch Encryption Challenge</button>
		</fieldset>
	</div>
	<br>
	<div id="decoding" class="aling"></div>
	</form>

 

Bom tem algumas coisa estranhar que eu nunca vi ser utilizada, como o evento de onload no object XmlHttpRequest; e o responseType  com o nome de 'jason'. Também não consegui entender qual a utilidade do método  alertContents().

 

Vou deixar aqui um tutorial de Introdução ao AJAX

 

Vou deixa também um código de exemplo:

function request()
            {
                let 
                    xmlhttp,
                    url = "server.php"; // remover

                if (window.XMLHttpRequest)
                {
                    // code for modern browsers
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {
                    // code for old IE browsers
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                if (!xmlhttp)
                {
                    alert('Giving up :( Cannot create an XMLHTTP instance')
                    return false
                }

                xmlhttp.onreadystatechange = function()
                {
                    if (this.readyState == 4 && this.status == 200)
                    {
                        let jsonRequest;

                        try {
                            jsonRequest = JSON.parse(this.responseText); // Convertendo o texto em um JSON
                            view(jsonRequest);
                            return;
                        }
                        catch(e)
                        {
                            alert("A resposta do servidor não pode ser convertida em um JSON");
                        }
                    }
                }

                xmlhttp.open("GET", url, true);
                xmlhttp.send();

            }

            function view(jsonRequest)
            {
                if (typeof jsonRequest != "object")
                {
                    return false;
                }

                let 
                    box = document.querySelector('div#decoding'),
                    challenge = document.createElement('fieldset'),
                    legendChallenge = document.createElement('legend'),
                    answer = document.createElement('fieldset'),
                    legendAnswer = document.createElement('legend');

                box.setAttribute('class', 'shadow');
                challenge.setAttribute('class', 'painting');
                answer.setAttribute('class', 'painting');

                legendChallenge.innerHTML = 'Challenge';
                challenge.innerHTML = `
                    Número de casas: ${jsonRequest.numero_casas}<br>
                    Token: ${jsonRequest.token}<br>
                    Cifrado: ${jsonRequest.cifrado}<br>
                    Decifrado: ${jsonRequest.decifrado}<br>
                    Resumo Criptografico: ${jsonRequest.resumo_criptografico}
                `;
                legendAnswer.innerHTML = 'Answer';
                answer.innerHTML = `
                    Número de casas: ${jsonRequest.numero_casas}<br>
                    Token: ${jsonRequest.token}<br>
                    Cifrado: ${jsonRequest.cifrado}<br>
                    Decifrado: ${jsonRequest.decifrado}<br>
                    Resumo Criptografico: ${jsonRequest.resumo_criptografico}
                `;

                box.appendChild(challenge);
                box.appendChild(answer);
                challenge.appendChild(legendChallenge);
                answer.appendChild(legendAnswer);
            }

 

Share this post


Link to post
Share on other sites

Obrigado Gabrielms! Sua resposta foi recebida com carinho.

 

A questão do button eu realmente desconhecia que ele recebesse esse atributo como default e isso solucionou o problema da piscadela.

 

 método  alertContents() ele está ae apenas para me orientar se o que estou recebendo, se estou recebendo  é o que eu realmente quero receber. Essa linha será comentada no final!

 

Mas você ajudou bastante resta agora só eu conseguir fazer a atribuição do json para outra variável.

 

Agora na questão da codificação confusa teria alguma dica de como eu resolver isso?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Anonicah
      Olá preciso de ajuda com esse exercício. Montei até a parte de formulário + validação de javascrip no dreamweaver mas buguei com o resto. O que eu fiz:
       

      <html>
      <head>
      <title> Formulário CPF validado com Java Script </title>
          
          <script language="javascript" type="text/javascript">
      function validar() {
      var cpf = form1.cpf.value;
          
      if (cpf == "") {
      alert('Preencha o campo com seu cpf');
      form1.cpf.focus();
      return false;
      }
          
      }
      </script>
          
          
      </head>
      <body>
      <form name="form1" action="enviar.php" method="post">
      CPF:
      <input name="cpf" type="text"><br /><br />
      <input type="submit"  onclick="return validar()">
      </form>
      </body>
      </html>
       
       
      EXERCÍCIO
      Criar um formulário simples em html com um único campo CPF;
      Fazer uma validação em javascript antes de fazer o post;
      Consumir o WS https://bi.vidaclass.com.br/utils para consultar informações do CPF enviado pelo form;
      Do retorno obtido exibir na tela:
      Nome, email, telefone
      Se tem compra em saude: Sim | Não
      Quantas compras: (5) ex.
      Se tem farma: Sim | Não
      Se tem dependente: Sim | Não
      Qtd. de dependentes: (2) ex.

      Obtem o token para consumir os endpoints;
      https://bi.vidaclass.com.br/auth
      {
          "company_id": 1,
          "username": "webmaster@vidaclass.com.br",
          "password": "Teste20170705"
      }
      Endpoint para consultar o CPF
      https://bi.vidaclass.com.br/utils
      {
          "action": 4,
          "key": {
              "cpf": 25383193820
          }
      }
    • By iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) {$vativochk = "checked";} else {$vativochk = "";} echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo ' </tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
      //funcoes do grid dos graficos function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.