Ir para conteúdo
Jefferson andre

Como pegar o retorno do ajax e mostrar na tela

Recommended Posts

Bom dia, alguem me ajude a fazer funcionar este pequeno script usando ajax. Preciso pegar a resposta do console e colocar na tela na id buscar2

Resposta do console:

{"valor_hr_viagem":"10","valor_por_km":"8","valor_apos_18":"7","valor_sabado":"6","valor_domingo":"5","id":"834"}

teste_ajax.html

<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>

<body>
	<button class="btn btn-default" id="buscar3" type="button">Buscar2</button>
	<div id="dados2">Aqui será inserindo o resultado da consulta...</div>
	<div id="valor_fixo_cliente">teste</div>
					
   <!-- SCRIPT NECESSARIO PARA O AJAX FUNCIONAR // <script src="jquery.2.1.3.min.js"></script> !-->
	<script src="jquery.2.1.3.min.js"></script>

		<script>
            function buscar3($id_cliente)
            {
                //O método $.ajax(); é o responsável pela requisição
                $.ajax
                        ({
                            //Configurações
                            type: "POST",//Método que está sendo utilizado.
                            dataType: "json",//É o tipo de dado que a página vai retornar.
                            url: "busca3.php",//Indica a página que está sendo solicitada.
                            //função que vai ser executada assim que a requisição for enviada
                            beforeSend: function (mensagem_retorno) {
                                $("#dados2").html("Carregando...");
                                $("#valor_fixo_cliente").html("Carregando...");
                            },
                            data: {id_cliente: "834"},//Dados para consulta
                            //função que será executada quando a solicitação for finalizada.
                            success: function (mensagem_retorno) {
							console.log (mensagem_retorno);

							$("#dados2").html(mensagem_retorno.conteudo);							
						}
                        });
            }

            $('#buscar3').click(function () {
                buscar3($("#id_cliente").val())
            });
        </script>
</body>
</html>


buscar3.php

<?php
require('conexao_dbo.php');
	include('error_report.php');

$id_procurar = $_POST['id_cliente'];

    $sql = "SELECT * FROM clientes WHERE id='$id_procurar'";
    $sql = $arquivo->query($sql);
    if($sql->rowCount()>0) {
		  $linha = $sql->fetch();
		
		$conteudo = json_encode(
			array ("valor_hr_viagem" => $linha['valor_hr_viagem'],
			"valor_por_km" => $linha['valor_por_km'],
			"valor_apos_18" => $linha['valor_apos_18'],
			"valor_sabado" => $linha['valor_sabado'],
			"valor_domingo" => $linha['valor_domingo'],
			"id" =>$linha['id']
			)
			);
			
	echo  $conteudo;
    }
?>

estrutura da tabela clientes em anexo

 

tabela clientes.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Vamos lá!

 

Repare que você tenta "chamar" o atributo

"conteudo" em "mensagem_retorno", porém

o mesmo não foi definido...

 

Chamada do atributo:

$("#dados2").html(mensagem_retorno.conteudo);

Onde os atributos foram definidos:

$conteudo = json_encode(
	array (
		// AQUI ESTAO OS ATRIBUTOS QUE VOCE DEFINIU
		// ATRIBUTO => "VALOR DO ATRIBUTO"
		"valor_hr_viagem" => $linha['valor_hr_viagem'],
		"valor_por_km" => $linha['valor_por_km'],
		"valor_apos_18" => $linha['valor_apos_18'],
		"valor_sabado" => $linha['valor_sabado'],
		"valor_domingo" => $linha['valor_domingo'],
		"id" =>$linha['id']
	)
);

 

Para o mesmo funcionar, o atributo

"conteudo" deveria ser definido, como

no exemplo a seguir:

$conteudo = json_encode(
	array (
		"valor_hr_viagem" => $linha['valor_hr_viagem'],
		"valor_por_km" => $linha['valor_por_km'],
		"valor_apos_18" => $linha['valor_apos_18'],
		"valor_sabado" => $linha['valor_sabado'],
		"valor_domingo" => $linha['valor_domingo'],
		"id" =>$linha['id'],
		"conteudo" => "Algo" // ADICIONADO
	)
);

 

#============

 

Segue um exemplo para melhor compreensão:

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	</head>

	<body>
		<button class="btn btn-default" id="buscar3" type="button">
			Buscar2
		</button>

		<div id="dados2">Aqui será inserindo o resultado da consulta...</div>
		<div id="valor_fixo_cliente">teste</div>

		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
		<script>
		function buscar3($id_cliente)
		{
			$.ajax
			({
				type: "POST",
				dataType: "json",
				url: "busca3.php",
				beforeSend: function (mensagem_retorno) {
					$("#dados2").html("Carregando...");
					$("#valor_fixo_cliente").html("Carregando...");
				},
				data: {id_cliente: "834"},
				// EM CASO DE SUCESSO DA CONSULTA
				// O OBJETO SERÁ ARMAZENADO EM
				// mensagem_retorno
				success: function (mensagem_retorno) {
					// APRESENTA O OBJETO NO CONSOLE
					console.log (mensagem_retorno);

					// NESTE EXEMPLO, CHAMAREMOS O ATRIBUTO
					// valor_apos_18, ENTRE OS EXISTENTES,
					// QUE SÂO:
					// valor_hr_viagem, valor_por_km,
					// valor_apos_18, valor_sabado
					// valor_domingo e id
					//
					$("#dados2").html(mensagem_retorno.valor_apos_18);
				}
			});
		}

		$('#buscar3').click(function () {
			buscar3($("#id_cliente").val())
		});
		</script>
	</body>
</html>
<?php
	require('conexao_dbo.php');
	include('error_report.php');

	$id_procurar = $_POST['id_cliente'];

	$sql = "SELECT * FROM clientes WHERE id='$id_procurar'";
	$sql = $arquivo->query($sql);

	if($sql->rowCount()>0) {
		$linha = $sql->fetch();

		$conteudo = json_encode(
			array (
				"valor_hr_viagem" => $linha['valor_hr_viagem'],
				"valor_por_km" => $linha['valor_por_km'],
				"valor_apos_18" => $linha['valor_apos_18'],
				"valor_sabado" => $linha['valor_sabado'],
				"valor_domingo" => $linha['valor_domingo'],
				"id" =>$linha['id']
			)
		);

		echo $conteudo;
	}
?>

 

#============

 

Caso seja de seu interesse estudar melhor

segue link:

https://dicasdeprogramacao.com.br/o-que-e-json/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Muito obrigado pela ajuda, vou estudar o link que voce me passou.

 

Agora o retorno esta preenchendo algumas divs como a $("#dados2") mas os campos de input nao com a mesma id. vou tentar entender o motivo.

 

Em VFP existe comandos que atualizam campos individuais da tela por ex. thisform.pageframe1.page2.nomedolabel.refresh

Imagino que deva existir algo assim para html ou no proprio ajax mas desconheço.

 

Grato mais uma vez pelo suporte

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se você deseja usar uma mesma funcionalidade

para mais de um elemento, então deverá utilizar

"classe", não "id".

 

Isso ocorre porque os IDs devem ser exclusivos

na página, e por sua vez, se houver mais que

um, o JQuery, selecionará o primeiro e ignorar

o restante.

 

Segue teste, abaixo:

CÓDIGO:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />

		<title> EXAMPLE </title>

		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	</head>

	<body>
		<h2>DOIS ELEMENTOS COM O MESMO ID</h2>
		<input type="text" id="f_test" />
		<input type="text" id="f_test" />
		<button id="btn_1">Preencher</button>
		<br />
		<h2>DOIS ELEMENTOS COM A MESMA CLASSE</h2>
		<input type="text" class="s_test" />
		<input type="text" class="s_test" />
		<button id="btn_2">Preencher</button>
		<br />

		<script type="text/javascript">
		// PARA OS ID's
		$ ('#btn_1').on ('click',function()
		{
			$("#f_test").val ('Preenchido!');
		});

		// PARA AS CLASSES
		$ ('#btn_2').on ('click',function()
		{
			$(".s_test").val ('Preenchido!');
		});
		</script>
	</body>
</html>

 

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 ILR master
      Fala pessoal.
       
      Seguinte:
       
      Quero selecionar duas tabelas e mostrar com resultados intercalados. Abaixo segue um código explicando para vcs terem uma ideia.
       
      $consulta = "SELECT A.*, B.* FROM tabela1 A, tabela2 B'";
      $resultado = mysqli_query($conexao, $consulta) or die ("erro");
      while($busca = mysqli_fetch_array($resultado)){
       
      print $busca['cod_evento']; --> traz o código da tabela1 
      print $busca['titulo_evento']; -->  traz o titulo da tabela1
      print $busca['cod_noticia']; --> traz o código da tabela2
      print $busca['titulo_noticia']; --> traz o tituloda tabela2
       
      }
       
      Espero que entendam. Grato
       
    • Por gersonab
      Bom dia
      estou com uma dúvida de como proceder, tenho uma tabela de categoria e uma de subcategoria, a categoria pode ter várias subs, até ai tranquilo, quando faço update de uma sub altero normalmente a quantidade deste, até aí normal, porém me deparei com uma situação um pouco diferente, vou tentar ser o mais claro possível, de certa forma algumas subs são comuns só mudando o nome praticamente, aí eu preciso que ao efetuar o update em umas destas este ocorra nas demais, tipo:
       
      Se o id da sub for 5 , eu preciso fazer o mesmo update nos ids 6 e 7 ;
       
      Se o id da sub for 9 , eu preciso fazer o mesmo update no id 10
       
      se for 2 , fazer o update somente neste
       
      ainda não estou conseguindo ver uma lógica para isso, e ou uma nova coluna para cadastrar em comum nestes casos.
       
      qual seria a melhor opção
    • Por JoaoSilva75
      oi pessoal
       
      se eu entrar no link dos desenvolvedores php pesquisasar quem é programador e enviar uma mesma mensagem para uns 6 ou 8 membros do forum serei advertido   ou é spam ???????
       
      procuro um programador php para me fazer algo 
       
      mas não tem como postar aqui nessa sessão
       
    • Por clovis.sardinha
      Tenho uma consulta de autocomplete no bd que funciona no servidor local e não roda no servidor da web. 
      Ao enviar a consulta no servidor local  aparece no console :Fetch terminou o carregamento: GET ".../Cidade?cidade=sao%20paulo". A pesquisa é feita normalmente.
      Quando mando a mesma pesquisa para o servidor web(locaweb) aparece no console: Fetch terminou o carregamento: GET "..../Cidade?cidade=sao%2520paul".
      O número 25 aparece só no servidor web. Pelo que pesquisei 25 significa %, ou seja, está duplicando o caractere %. 
      Não consegui utilizar nenhuma função para evitar que isto ocorra. Alguém sabe se há alguma configuração no servidor web que possa ser alterada para evitar essa duplicação?
       
    • Por gersonab
      Boa tarde, estou quebrando a cabeça aqui para somar os dados agrupados de vários itens distintos de uma tabela e inserir em outra. tipo :
      $consulta31 = $pdo->query("SELECT SUM(valoror) AS val1, SUM(metros) AS metr, orc, idcatc, idmate FROM orcamencli WHERE orc=$orc GROUP BY idcatc, idmate"); $user331 = $consulta31->fetch(PDO::FETCH_ASSOC); $orcx = $user331['orc']; $idcatcx = $user331['idcatc']; $val1x = $user331['val1']; $metrx = $user331['metr']; $idmatex = $user331['idmate']; o resultado de cada item agrupado eu faria um outro calculo separado para inserir em outra tabela, tipo ...
      a tabela acima eu teria algo assim :
       
      orcx = 01 - 01 - 01 - 01 - 01 - 01 - 01 - 01 - 01
      idcatcx = 11 - 11 - 11 - 11 - 11 - 11 - 11 - 11 - 11
      val1x = 1,00 - 1,00 - 3,00 - 3,00 - 3,00 - 1,00 - 3,00 - 1,00 - 2,00
      metrx =  01 - 01 - 03 - 03 - 03 - 01 - 03 - 01 - 02
      idmatex =  11 - 11 - 21 - 21 - 21 - 31 - 31 - 31 - 31
       
      preciso inserir  na outra tabela o seguinte :
      orc = 01 - 01 - 01
      idcatc = 11 - 11 - 11
      val1 = 2,00 - 9,00 - 7,00 ( aqui não é só a soma dos valores , existe um outro cálculo )
      metr =  02 - 09 - 07
      idmate =  11 -  21 -  31
       
       a dúvida é --> como inserir estes valores separados de uma única vez em outra tabela.
×

Informação importante

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