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 gersonab
      Bom dia, utilizo um sistema de auto complete que funciona quase que perfeitamente, porque quase, se eu tenho 10 Marias cadastradas o autocomplete só inicia após eu colocar uma letra do segundo nome e ou sobrenome, tipo :
      se eu escrever Maria somente, não aparece opções na lista;
      agora se eu escrever Maria A - ja começa a aparecer opções na lista;
      tem como iniciar as opções após uma terceira letra digitada ?
      segue o código que utilixo.
      form
      <label class="field"> <input type="text" name="nomec" id="nomec" class="gui-input"> <input type="hidden" name="idc" id="idc"> </label> ajax
      $( "#nomec" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "../lista/autocli.php", type: 'post', dataType: "json", data: { search: request.term }, success: function( data ) { response( data ); } }); }, select: function (event, ui) { $('#nomec').val(ui.item.label); $('#idc').val(ui.item.value); return false; } }); autocli.php
      require_once('config.php'); if(isset($_POST['search'])){ $search = $_POST['search']; $query = "SELECT DISTINCT nomec AS nomec, idc FROM cli WHERE nomec like'%".$search."%'"; $result = mysqli_query($con,$query); $response = array(); while($row = mysqli_fetch_array($result) ){ $response[] = array("value"=>$row['idc'],"label"=>$row['nomec']); } echo json_encode($response); } exit; desde já agradeço.
       
    • By Rodrigo Biaggio
      Senhores(a), por favor, alguém consegue me ajudar a entender como posso fazer para colocar o conteúdo abaixo, dentro de uma DIV, separando ou criando como se fosse uma tabela com o campo HostGroup e Licenças? 
       
      {"GFUnificado":14,"APIGateway":22,"OSBSegregado1":202,"Portal":14,"OAM":30,"MicroServicos":68,"Loja":58.5,"60-Lojas":46,"-Callcenter":37,"360-Dealers":24,"SOAMecsol":30,"MeuEmpresas":40,"OSBFarm4":89,"Prisma":8,"EricssonRevenueManager":50.75,"N":80,"Atl":10,"OSBEAI":2,"Next":208.5}
       
      Segue meu código:
       
      <!DOCTYPE html> <html lang="pt-br"> <title>API Management</title> <head> <meta charset="8"> </head> <body> <script> var urlapi = 'http://xxxxx.xxxx; function fazerRequisicao(){ var url = urlapi + document.getElementById('hostgroup').value; //var url = urlapi; var xhttp = new XMLHttpRequest(); xhttp.open("GET", url, false); xhttp.send(); var obj = JSON.parse(xhttp.responseText); var data_map = new Map(); var index = 0; for (i = 0; i < obj.length; i++) { if(data_map.has(obj[i].hostGroup.name)) { data_map.set(obj[i].hostGroup.name, data_map.get(obj[i].hostGroup.name) + +obj[i].consumedHostUnits); } else { data_map.set(obj[i].hostGroup.name, +obj[i].consumedHostUnits); } } const objConverted = Object.fromEntries(data_map); var myJSON = JSON.stringify(objConverted); document.getElementById("div-responsetext").innerHTML = myJSON; } var len = myJSON.hostGroup.name.length, aryHostGroup = []; </script> <button onclick="fazerRequisicao();">Pesquisar</button> <input type="text" id="hostgroup" style="width: 100px;"> <hr/> <div id="div-responsetext"></div> </body> </html>  
       
    • By Luiz Henrique de Sousa
      Boa noite habilitei meu required, para quando o campo B da minha picklist estiver vazio ele não poder salvar, adicionei uma mensagem no meu Bean e já tentei requiredMessage e validatorMassage e nada , mas fica me retornando a mensagem padrão do richfaces do mesmo jeito, OBS: fora a mensagem padrão do richfaces ele me retorna o componente da form frEditForm:colunaCustomizada Erro de validação: o valor é necessário.
       
      Código:
       
      <h:outputLabel for="colunaCustomizada" value="#{messages.colunas_selecionadas}" /> <rich:pickList id="columnCustomization" value="#{defaultMBean.colunasSelecionadas}" var="colunas" sourceCaption="#{messages.colunasDisponiveis}" targetCaption="#{messages.selecionarColunas}" addAllText="#{messages.coluna_addall}" addText="#{messages.coluna_add}" removeAllText="#{messages.coluna_removeall}" removeText="#{messages.coluna_remove}" listHeight="310px" required="true" orderable="true" downText="" downBottomText="" upText="" upTopText="" itemClass="rf-pick-item"> <rich:message for="colunaCustomizada"> </rich:message>  
      Ajax, JS..
       
      <a4j:jsFunction name="validateRequiredFields" action="#{defaultMBean.validarCamposObrigatorios(nome, produto, dataFormato, colunaDataSelecionada)}" oncomplete="btnSaveClick()" reRender="pnlMenssagem"> <a4j:param name="param" assignTo="#{nome}"/> <a4j:param name="param1" assignTo="#{produto}"/> <a4j:param name="param2" assignTo="#{dataFormato}"/> <a4j:param name="param3" assignTo="#{colunaDataSelecionada}"/> </a4j:jsFunction> <script type="text/javascript" language="JavaScript"> /*<![CDATA[*/ initializeTemplatePickList(true); $("#ngEditForm\\:btnSave").bind('mousedown', function(event){ this.focus(); var array = assembleChanges(); saveChanges(array); validateRequiredFields( $("#frEditForm:\\:fldNome").val(), $("#frEditForm:\\:fldTipo option:selected").val(), $("#frEditForm:\\:fldDataFormato").val(), templateColumnPicklist.getcolunaDataSelecionada() ); }); function btnSaveClick() { if($('#pnlMenssagem').length == 0) { $("#ngEditForm\\:btnSalvar").click(); } }
    • By Thiago Franchin
      Pessoal gravei esse tutorial de Gastby.js, espero que gostem: 
       
       
    • By alysson122010
      Galera tenho esse codigo e gostaria que as impressao das latitudo e longitudo aparecesse em dois inputs diferentes para depois eu manda para um banco de dados com um insert.
       
      meu codigo:
      <p id="demo"></p> <body onload="getLocation()"> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="O seu navegador não suporta Geolocalização.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> </body>  
×

Important Information

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