Jump to content
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

Share this post


Link to post
Share on other 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/

Share this post


Link to post
Share on other 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

 

Share this post


Link to post
Share on other 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>

 

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 jonathasouza
      Como eu poderia colocar um botão no para setar um valor na tabela do php?
      meu codigo php abaixo, eu gostaria que ele colocasse o valor onclick $nome na parte do analista da tabela via modal.
       
       
       

          <?php
      $nome = isset($_GET["nome"])? $_GET["nome"]:null;
      $matricula = isset($_GET["matricula"])? $_GET["matricula"]:null;
      $solicitacao = isset($_GET["solicitacao"])? $_GET["solicitacao"]:null;
      $prioridade = isset($_GET["prioridade"])? $_GET["prioridade"]:null;
      $orgao = isset($_GET["orgao"])? $_GET["orgao"]:null;
      $conexao = mysqli_connect('localhost', 'root', '', 'analistas');
      $query = "SELECT `solicitacao`,`prioridade`,`orgao`, `nome` from `analistas` WHERE `analistas`";
      if (mysqli_query($conexao, $query))
          { ?>
       
       
         <?php
      $conexao = mysqli_connect('localhost', 'root', '', 'analistas');
      if(mysqli_connect_errno($conexao)){
      echo 'Failed to connecto to database'.mysqli_connect_error();}

      $query= mysqli_query($conexao, "SELECT DISTINCT `solicitacao`, `prioridade`, `orgao` FROM ordem");
      ?>
                                  <?php while($rows = mysqli_fetch_array($query)): ?>
                                  <tr>
                                      <td><?php echo $rows['solicitacao']; ?></td>
                                      <td><?php echo $rows['prioridade']; ?></td>
                                      <td></td>
                                      <td></td>
                                      <td><?php echo $rows['orgao']; ?></td>
                                      <td></td>
                                      <td></td>
                                  </tr>
                                  <?php endwhile; ?>
       
       
       <!-- Modal -->
                          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                              <div class="modal-dialog" role="document">
                                  <div class="modal-content">
                                      <div class="modal-header">
                                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                          <h4 class="modal-title" id="myModalLabel"><strong>Solicitação</strong></h4>
                                      </div>
                                      <div class="modal-body">
                                          <div class="insertHere">
                                          </div>
                                      </div>
                                      <div class="modal-footer">
                                          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                          <button class="btn btn-success" data-dismiss="modal" value="Add Item" onClick="addRow('OrderTable')">Confirmar</button>
                                      </div>
                                  </div>
                              </div>
                          </div>
    • By amandafuceli
      Sou iniciante no que se refere à linguagem do MySql e estou tentando filtrar algumas informações que preciso retirar de uma tabela.

      Basicamente eu tenho dados de indivíduos em anos seguidos (2003, 2004, 2005) todos em uma mesma tabela. Além desses dados, disponho de informações, por exemplo, da escolaridade (que pode mudar ano após ano, ou manter-se constante).

      Porém alguns registros da minha base de dados são inconsistentes, por exemplo, selecionando os primeiros registros ordenados pelo cpf e pelo ano, temos (mudei o cpf por motivos de sigilo dos dados):
        1 2 3 4 5 6 7 8 9 10 11 12 13 14 Ano      CPF        Escolaridade 2004    10000000kkk 3 2005    10000000kkk 5 2003    10000000zzz 7 2005    10000000zzz 6 2003    10000000ttt 7 2005    10000000ttt 4 2004    10000000ppp 6 2005    10000000ppp 9 2004    10000000sss 7 2005    10000000sss 9 2005    10000000sss 9 2003    10000002xxx 6 2005    10000002xxx 7
      A escolaridade é codificada:
        1 2 3 4 5 6 7 8 9 10 11 12 ANALFABETO      1 ATE 5.A INC     2 5.A CO FUND     3 6. A 9. FUND    4 FUND COMPL      5 MEDIO INCOMP    6 MEDIO COMPL     7 SUP. INCOMP     8 SUP. COMP       9 MESTRADO        10 DOUTORADO       11 IGNORADO        -1
      Minha dúvida é: como posso filtrar essas inconsistências? Alguém pode me ajudar?  
    • By Jamersonjds
      Pra aprendizado, estou tentando listar dados do banco de dados e trazer os resultados para meu html.
      Estou conseguindo fazer com este código.
       
      <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <title>Chat</title> <link rel="stylesheet" href="../public/style/reset.css"> <link rel="stylesheet" href="../public/style/chatStyle.css"> <!-- É adicionado a biblioteca jquery e o fontAwesome --> <link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet"> <link href="../public/style/fontawesome/css/all.css" rel="stylesheet"> <script src="../public/js/jquery.min.js"></script> </head> <style> .test2 { cursor: pointer; } </style> <script> $(document).ready(function(){ var itens = "", url = "../includes/configs/chat.php", itens2 = ""; // Capturar dados usando Método AJAX do jquery $.ajax({ url: url, cache: false, dataType: "json", success: function(retorno){ for(var i = 0; i<retorno.length; i++){ itens += "<li>"; itens += "<a class='test2' onclick='function retornou(){$('.Tes22').html('wadwd')}'>"; itens += "<div class='imgUserList'>"; itens += "<div class='widthUserImg'>"; itens += "<div class='imgUserListD'><img src='https://avatars0.githubusercontent.com/u/3966553?s=460&v=4' alt=''></div>"; itens += "</div>"; itens += "<div class='textUserList'>"; itens += "<input type='text' class='pegarID' value='" + retorno[i].id + "'>"; itens += "<span class='title'>" + retorno[i].email + "</span>"; itens += "<h1 class='title'>Está online</h1>"; itens += "</div>"; itens += "</div>"; itens += "</a>"; itens += "</li>"; } $(".pessoas").html(itens); } }) }); </script> <body onload="carregarItens()"> <div class="container"> <div class="listaPessoas"> <div class="headerPeople title"> <h1>Contatos</h1> <h2 class="Tes22"></h2> </div> <ul class="pessoas"> <!-- <li> <a href=""> <div class="imgUserList"> <div class="widthUserImg"> <div class="imgUserListD"><img src="https://avatars0.githubusercontent.com/u/3966553?s=460&v=4" alt=""></div> </div> <div class="textUserList"> <span class="title">10.1.196.90</span> <h1 class="title">Está online</h1> </div> </div> </a> </li> --> </ul> </div> <div class="chat"> <div class="chatHeader"> <div class="title text"> <h1>james</h1> </div> <div class="menuUser title"> <i class="fas fa-ellipsis-h"></i> </div> </div> <div class="chatMessage"> </div> <div class="chattext"> <form action=""> <input type="text" id="modal"> <button><i class="fas fa-paper-plane"></i></button> </form> </div> </div> <div class="infoPessoas"> </div> </div> <script src="../public/js/chat.js"></script> </body> </html> Porém estou querendo pegar apenas o ID e colocar em um <h2> e não estou conseguindo.
      Exemplo: Ao clicar em um dado vindo do banco de dados como é listado acima eu colocar o ID dele no <h2>.
       
      Este é meus dados vindo do PHP já no json.
      echo json_encode($dados, JSON_PRETTY_PRINT);  
    • By jonathasouza
      Como posso criar uma query no php que não duplique varias vezes o valor?
       
      Gostaria de colocar apenas um valor desses por vez, e não a mesma coisa repetida.
       
        <?php
      $conexao = mysqli_connect('localhost', 'root', '', 'analistas');
      if(mysqli_connect_errno($conexao)){
      echo 'Failed to connecto to database'.mysqli_connect_error();}

      $query= mysqli_query($conexao, "SELECT DISTINCT * FROM tecnicos, ordem");
      ?>

    • By kelvim
      Bom dia,
      estou fazendo varias requisições "simultaneas" via ajax para uma mesma página php. Cada requisição quando feito em separado demora cerca de 10s para terminar. O problema é que quando executo todos de uma vez o servidor PARECE ficar "esperando" a requisição anterior terminar. Na prática não está sendo assinc.
       

       
      Pode ver na imagem que na sequencia sempre demora +- 10 segundos a mais que o anterior.
       
      Alguém pode me dar uma luz de como resolver isso?
      Estou no lugar certo para essa pergunta?
      Edit: Abri no fórum de php por que acredito que o js estã fazendo a requisição de forma assinc corretamente (a julgar  pela 4° requisição que terminou antes da 3°)
×

Important Information

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