Ir para conteúdo
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;
}

Compartilhar este post


Link para o post
Compartilhar em outros 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);
            }

 

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
    • Por gersonab
      Bom dia a todos, estou usando o datatable com uma consulta mysql e funciona 100% , meu único problema é na hora que eu exporto para pdf, este não vem com sua largura da tabela exportada em 100%, dependendo da situação ocupa apenas 30% da página, infelizmente após varias pesquisas ainda não encontrei uma forma de fazer.
      segue meu código de forma simples:
      $('#exportar').DataTable( { language: { url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/pt-BR.json', }, dom: 'Bfrtip', order: [[ 0, 'desc' ]], buttons: [ 'pdfHtml5' ] } ); desde já agradeço toda ajuda possível
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.