Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lucas70770

Receber dados pelo metodo XMLHttpRequest com Javascript

Recommended Posts

Ola, estou com um código que peguei na internet ele envia meu form com esse método:

var request = new XMLHttpRequest();
request.open('post', '../server.php');

E na pagina server.php eu insiro no banco de dados algumas informações. Porem quero q a pagina server.php me retorne algumas dados e não sei fazer isso com esse método XMLHttpRequest.

Obrigado pela atenção.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Citar

 não sei fazer isso com esse método XMLHttpRequest

 

Tenho um passo a passo no GitHub focado em explicar como efetuar um Ajax, veja se ajuda:

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax

 

Percebi tmb que você está tentando efetuar via JS nativo (sem jQuery)

 

Tem um exemplo básico de consulta por CEP aqui: (Utilizando apenas JavaScript)

http://gabrieldarezzo.github.io/busca_cep/vanilla.html

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado pela ajuda @wootzor e @gabrieldarezzo, mas não consegui o que eu queria. Testei o response mas não deu resultado, ele não me retorna o echo da minha pagina php que estava sendo usada pelo open. Eu também testei com o exemplo do Mozilla mas além de não dar resultado eu não entendi porque o response vem antes do open.

 

Exemplo:

var url = 'somePage.html'; //A local page

function load(url, callback) {
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      console.log(xhr.response); //Outputs a DOMString by default
    }
  }

  xhr.open('GET', url, true);
  xhr.send('');
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você chamou a sua própria função?

Pois testei aqui e funcionou normalmente (ocorreu a impressão no console (F-12 no navegador))

 

 

Exemplo completo utilizando o seu:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
	
	<script type="text/javascript">
		var url = 'somePage.html'; //A local page

		function load(url, callback) {
		  var xhr = new XMLHttpRequest();

		  xhr.onreadystatechange = function() {
			if (xhr.readyState === 4) {
			  console.log(xhr.response); //Outputs a DOMString by default
			}
		  }

		  xhr.open('GET', url, true);
		  xhr.send('');
		}
		
		//Chama assim que o JS é carregado..
		load(url, function(){});
		
		
	
	</script>
	
</body>
</html>

 

Fiquei em duvida com esse callback, mas ok.

 

 

 

Alguns pontos que você pode estar comendo bola:

 

1- Verifique se no seu Console tem algum erro. (F-12 no Navegador/Aba Console)

 

2- abra a pagina 'somePage.html' e verifique se a mesma está funcionando.

 

3- Monitore a requisição pela aba NetWork do seu Navegador

 

Exemplo pelo Chrome: https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax#5---acompanhar-oq-foi-enviado

( Vendo principalmente as sub-abas: Preview/Response  ) 

 

 

 

 

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acho q a ideia do Mozilla seria encapsular a requisição ajax dentro de uma função (Um Click de botão por exemplo?)

 

 

Levando em conta que funções são coisas primordiais é deduzível que a mesma deve ser chamada ;) 

Da uma lida no Guia de ajax. pode de dar uma ideia mais completa.

 


Que bom q deu certo ai.

Abraços.

Citar

Fiquei em duvida com esse callback, mas ok.

A ideia principal de callback em funções assincronas é dar continuidade no fluxo, já q você não tem noção de qnd a função vai terminar... porem assim q ela terminar é disparada a função callback saca?

https://pt.wikipedia.org/wiki/Comunicação_assíncrona

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então quer disser que se eu usar esse função para quando eu clicar em um botão dar um submit em vários formulários e cadastrar no banco de dados pela pagina chamada por  essa função pode haver algum erro(no caso haver apenas um cadastramento) se não usar o callback?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não o tratamento de erro deveria ser feito dentro da propria requisição.

Ex:

var url = "https://viacep.com.br/ws/05373030/json/";		

ajax = new XMLHttpRequest();			

ajax.onreadystatechange = function() {
	if (ajax.readyState == XMLHttpRequest.DONE ) {
	   if (ajax.status == 200) {
		   var json = JSON.parse(ajax.responseText);							
		
			//Assim que chegar aqui signfica que foi uma requisição 'OK' e pode executar o CallBack
			return callBack(json);
		
	   } else if (ajax.status == 400) {
		  alert('There was an error 400');
	   }
	   else {
		   alert('something else other than 200 was returned');
	   }
	}
};

ajax.open('GET', url, true);
ajax.send();

Lista das resposta HTTP (200 é 'ok'), 404 = Não existente... e por ai vai hehe

https://pt.wikipedia.org/wiki/Lista_de_códigos_de_estado_HTTP

 

Outra coisa bem comum (e até uma boa pratica) é definir um tempo maximo para a função (o famoso timeout)

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/timeout

 

 

Voltando ainda o exemplo acima...

Faz de conta que fora do escopo (do ajax) você tem uma função chamada 'populaEndereco()' 

Que recebe os parametros endereço, bairor, cidade e popula isso no HTML.

 

 

Exemplo completo:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Busca de CEP Ajax e WebService</title>

	<!--Let browser know website is optimized for mobile-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	
	<meta name="description" content="Uma simples consulta no WebService da ViaCep para preencher o endereço utilizando o CEP">
	<meta name="keywords" content="HTML,JS,JsVanilla,Vanilla,CEP, WebService,Estudo Js,Endereço Automatico">
	<meta name="author" content="Gabriel Darezzo">

	
	<style type="text/css">
		label{
			display: block;		
		}		
		.big-field{
			width: 100%;
			max-width: 310px;
		}
	</style>
</head>
<body>



<form action="#" onsubmit="return false">
	<h5>Busca de CEP</h5>

	<label for="cep">Cep</label>
	<input type="tel" placeholder="Informe o Cep" id="cep" name="cep" maxlength="8">
	<!-- Repare no maxlength="8", assim apenas 8 digitos do cep são aceitos -->
		
	<label for="uf" >UF</label>
	<input type="text" placeholder="UF" name="uf" id="uf">
	

	<label for="cidade" >Cidade</label>
	<input type="text" placeholder="Informe a cidade" id="cidade" name="cidade">
		
	<label for="bairro" >Bairro</label>
	<input type="text" placeholder="Informe o Bairro" name="bairro" id="bairro">
	
	
	<label for="endereco" >Endereço</label>
	<input type="text" class="big-field" placeholder="Informe o seu Endereço Ex:(Rua da Consolação)" name="endereco" id="endereco">
	
	<label for="nr_end" >Número</label>
	<input type="text" class="big-field" placeholder="Informe o número do endereço" name="nr_end" id="nr_end">
	
	<hr />
		
	<h3>Tecnologias:</h3>		
	<ul>
		
		<li>JS - Vanilla</li>
		<li>HTML</li>					
		<li>Ajax</li>
		<li>Consumo de WebService</li>
	</ul>
	
	<p>Este tutorial é um bonus do '<a target="_new" href="https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax">Guia definitivo AJAX</a>'
	
	<hr />
	<a href="http://vanilla-js.com" title="Powered By VanillaJs">
		Powered By <img src="http://vanilla-js.com/assets/button.png" alt="VanillaJs" />
	</a>	

</form>


<script type="text/javascript">

	//Foca no Cep
	document.getElementById('cep').focus();


	var lastCepCheck = '';

	document.getElementById('cep').addEventListener('keyup', function() {			
		//Impede inserir algo alem de Números
		this.value = this.value.replace(/[^0-9]/, "");
		
		//Pega apenas os números
		var cep = this.value.replace(/[^0-9]/, "");
		
		//Só pesquisa se tiver 8 caracteres e o ultimo cep pesquisado seja diferente do atual.
		if(cep.length != 8 || lastCepCheck == cep){
			return false;
		}
		lastCepCheck = cep;
		
		ajax = new XMLHttpRequest();
		
		var url = "http://viacep.com.br/ws/"+cep+"/json/";		
		ajax.open('GET', url, true);
		ajax.send();
		
		ajax.onreadystatechange = function() {
			if(ajax.readyState == 4 && ajax.status == 200) {
				
				var json = JSON.parse(ajax.responseText);							
				document.getElementById('endereco').value = json.logradouro;
				document.getElementById('bairro').value = json.bairro;
				document.getElementById('cidade').value = json.localidade;
				document.getElementById('uf').value = json.uf;
				document.getElementById('nr_end').focus();
			}
		}
	});		
</script>
</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

É que o que acabei de citar acima é o que realmente esta acontecendo comigo.  Eu tenho vários inputs file em forms diferentes(para processar a porcentagem do update dos arquivos de forma separada)  e quando clico no botão <a>('Inserir Updates') ele da um submit em todos os forms mais na pagina php que processa os dados ele já faz o cadastramento do nome do arquivo, tamanho e código. Mas sempre que faço um teste no sistema eu envio três updates e sempre é cadastrado apenas o ultimo form e só é feito o update do arquivo deste form.

Só pra constar os forms são colocados de forma dinâmica(tem um botão que quando usado acrescenta um novo form de update) então o problema não é o form.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Requisição ajax para inputs-file sempre foi problemáticas. pelo menos eu nunca acertei uma maneira legal garantindo comparatibilidade com browsers antigos, se alguém tiver um exemplo/artigo legal cite por favor.

 

Oq eu faço normalmente para deixar 'dinâmico' é a pessoa poder inserir multiplos files e enviando pelo Form/submit normalmente.

 

Exemplo:

https://github.com/gabrieldarezzo/comum/blob/master/upload_file.php

 

 

Ps: ei editei ali em cima 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ok é que eu preciso que ele mostre o process bar contado a porcentagem da transferência, se não o usuário pode fechar a pagina antes de ter transferido os arquivos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Já mas deu muito trabalho fazer todo o sistema de update, então não quero fazer tudo de novo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cria um tópico novo.

 

Adiantando já...

Testa esse aqui:

http://malsup.com/jquery/form/progress3.html

 

Aparentemente funciona legalzinho.

 

Sobre dar muito trabalho.... :tongue:

http://lmgtfy.com/?q=upload+process+bar+javascript

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • 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.