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 rogerblower
      o Google me avisou de dois erros no meu site;
       
      Clickable elements too close together
      Text too small to read
       
      Na verificação constatei que o erro é;
       
      Fatal error:  Call to undefined function db_connect() in
       
      O php não me mostra esse erro mesmo habilitando os erros no php ini os arquivos de conexão que estou usando são;
       
      ini.php
      <?php define('DB_HOST', 'localhost'); define('DB_USER', 'user'); define('DB_PASS', 'senha'); define('DB_NAME', 'banco'); ini_set('display_errors', true); error_reporting(E_ALL); require_once 'functions.php'; functions.php
       
      <?php function db_connect() { $pdo = new PDO('mysql:host=' . DB_HOST . ';dbname=' . DB_NAME . ';charset=utf8', DB_USER, DB_PASS); return $pdo; } function make_hash($str) { return sha1(md5($str)); } function isLoggedIn() { if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in']!== true) { return false; } return true; } O erro esta nesta linha
      <?php $pdo = db_connect(); $sql = $pdo->prepare("SELECT * FROM servicos "); $sql->execute(); while($row=$sql->fetch(PDO::FETCH_ASSOC)){ echo'<a href="servicos.php?id='.$row['id'].'">'.$row['servico'].'</a>'; } Incluo a conexão com banco na header.php e nas demais páginas não aparece o erro
      realmente não sei o que pode estar acontecendo.
      se alguém pode me ajudar?
       
      Obrigado
       
    • By Rafaelax
      Oi queridos,
      Não sou programadora e nem entusiasta de programação, apenas altero algumas coisas no meu programa que tenho de cadastro de clientes. Coisas básicas vamos dizer;
      Para facilitar tudo, quando o programa foi criado, foi feito um campo de data automático no banco de dados como abaixo.
      `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
       
      Funciona bem para o que preciso, mas ele traz a data nesse formato: 2020-03-25 00:20:03
      Data no formato ano/mês/dia e eu queria no formato tradicional dia/mês/ano.
      Só para levar em conta. eu trago a data para visualizar em um campo normal de inpunt com o value="[date]"
      Esse acima é um dos problemas que quero resolver com a parte da data.
       
      Já a segunda questão é justamente envolvendo essa data automática, pois qualquer edição que faço ele atualiza a data e o horário. Perfeito. Mas perco a data de cadastro original do cliente. É possível eu ter um outro campo de data automático mas que apenas grave o cadastro e não  atualize automaticamente nas edições?
       
      Eu queria que uma data fosse do cadastro e não atualizasse e outra data continuasse como está, apenas fazendo a inversão.
      Não adianta eu colocar a data manual no cadastro, pois pessoas colocam datas diferentes das do dia do cadastro.
       
    • By juliosertori
      Opa tudo bem?
       
      Tenho uma query que agrupa por CIDADE, o problema é que o cliente pode digitar a cidade, então as vezes digita com e sem caracter especial, por exemplo: São Paulo, e Sao Paulo, como posso agrupar os 2?
       
      "SELECT sum(p.total_pedido) as totalpedidos, p.id_empresa, p.id_cliente, c.id, c.cidade FROM pedidos AS p JOIN clientes AS c ON p.id_cliente = c.id WHERE p.id_empresa = '".$_CPD['CompanyId']."' AND p.finalizado = '1' AND MONTH(p.data_pedido) = '$mes_atual' group by c.cidade order by totalpedidos desc limit 0,10"  
    • By mateusmarcucci
      Pessoal, meu primeiro tópico, então desculpa qualquer coisa...
       
      É o seguinte, pra treinar to criando um sisteminha de aposta.
       
      Consiste em 2 campos, Valor apostado e ODD (odd é o quanto vai multiplicar a aposta caso ganhe). Porém quero colocar uma telinha aonde ele vai somar todos os ganhos e perdas do dia.
       
      Estou fazendo a soma direto no php, porém gostaria de passar o resultado dessa soma no banco de dados para assim ser possível somar as colunas.
       
      Eu tenho o metodo de escolha que é Ganhou ou Perdeu.
       
      Exemplo:   Valor apostado: R$5,00 | ODD 2.0 = R$10,00     Porém o lucro é apenas R$5,00. Tendo em vista que o lucro é subtraído do valor total - valor apostado. Caso perca, o valor apostado apenas passa a ser negativo
       
      Vou deixar o código que estou utilizando:
       
       
       
      <?php
          session_start();
          include_once("servidor.php");

          if (!empty($_SESSION['usuario']) and !empty($_SESSION['id'])) {
              $id = $_SESSION['id'];
              $nome = $_SESSION['nome'];
              $usuario = $_SESSION['usuario'];
          }else{
              $_SESSION['mensagem']="Você não está logado";
              header("Location: index.php");
              exit;
          }
          $id = $_SESSION['id'];        
          $consulta = "SELECT * FROM Resultados WHERE id = '$id' ORDER BY resultado ASC";
          $con = mysqli_query($conexao, $consulta);
          $banca = "SELECT * FROM Usuarios";
          $conBanca = mysqli_query($conexao, $banca);
          
      ?>

      <!DOCTYPE html>
      <html>
      <head>
          <title>Anote sua Aposta - Painel</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" type="text/css" href="css/cssEstilo.css">

          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
          <!-- Font Awesome -->
          <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
          <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
          <script type="text/javascript" src="js/bootstrap.min.js"></script>
          <script type="text/javascript" src="js/jquery.mask.min.js"></script>
          <script type="text/javascript">
                  $(document).ready(function(){
                      $("#valor").mask("99990.00", {reverse: true})    
                      $("#odd").mask("999.999.990.00", {reverse: true})
                      
                  })        
                      
          </script>
      </head>

      <body class="fundoBodyPainel">
          <!-- topo -->
          <?php include('topo.php'); ?>
          <!-- fim topo -->
          <section>                        
                  <nav>
                      <p class="topoPainel"><strong>Bem vindo(a),</strong> <?php echo $_SESSION['nome'];?></p>
                  </nav>
          </section>
          <!-- Botão para acionar modal -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalExemplo">
                Adicionar uma nova aposta
          </button>
          <!-- Modal -->
          <div class="modal fade" id="modalExemplo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Adicionar uma nova aposta</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <section>
                      <div>
                          <form action="validarResultado.php" method="get" accept-charset="utf-8">
       
                                    <div class="form-group">
                                      <label>Valor Apostado:</label>
                                      <input type="text" class="form-control" id="valor" placeholder="Valor Apostado"
                                          name="valor">        
                                    </div>

                                    <div class="form-group">
                                      <label>ODD:</label>
                                      <input type="text" class="form-control" id="odd" placeholder="ODD" name="odd">                
                                   </div>
                                    <div class="form-group">
                                        <label for="Resultado">Resultado</label>
                                        <select id="inputEstado" class="form-control" name="resultado">
                                          <option selected>Escolher...</option>
                                          <option>Ganhou</option>
                                          <option>Perdeu</option>
                                        </select>
                                  </div>
                                </div>
                                    <button id="botaoCadastro" type="submit" name="enviar" class="btn btn-danger">Cadastrar</button>
                              </form>
                      </div>
                  </section>
                </div>
              </div>
            </div>
          </div>

          <section class="containerContatos">
              <div class="container">
                  <div class="row">
                      <div class="col-md-12">
                          <div class="d-flex justify-content-center table-responsive">
                              <table class="table table-striped" style="background: white;">
                                <thead class="thead-dark">
                                  <tr>
                                    <th scope="col">Valor</th>
                                    <th scope="col">ODD</th>
                                    <th scope="col">Resultado</th>
                                    <th scope="col">ID Aposta</th>
                                    <th scope="col">Retorno</th>
                                  </tr>
                                </thead>
                                <tbody>
                                    <?php
                                      while($dado = mysqli_fetch_assoc($con)) {
                                  ?>
                                  <tr>
                                    <td><?php echo $dado["valor"]; ?></td>
                                    <td><?php echo $dado["odd"]; ?></td>
                                    <td><?php echo $dado["resultado"]; ?></td>
                                    <td><?php echo $dado["idAposta"]; ?></td>
                                    <td><?php    
       
                                                $opcao1 = $dado["resultado"];                                                                                
                                                if ("$opcao1" == 'Ganhou') {
                                                    $retorno = ($dado["valor"] * $dado["odd"]) - $dado["valor"];
                                                    $retorno1 = $retorno;
                                                  $retorno1 = number_format($retorno1, 2, '.', '');
                                                  $retorno4 = $retorno;
                                                    echo "$retorno1";
                                                }
                                                if ("$opcao1" == 'Perdeu') {
                                                    $retorno = ($dado["valor"] - $dado["valor"]) - $dado["valor"];
                                                    $retorno1 = $retorno;
                                                  $retorno1 = number_format($retorno1, 2, '.', '');
                                                  $retorno4 = $retorno;
                                                    echo "$retorno1";
                                                }
                                                
                                            ?>                                          
                                    </td>                          
                                    </td>
                                  </tr>                            
                                  <?php } ?>
                                </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
              </div>
          </section>    

          <?php  ?>
          

          
          <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
      </body>

      </html>
    • By ismaelfiorotti
      Olá, Bom Dia! Estou fazendo um sistema de busca avançada no PHP, estou precisar fazer uma pesquisa onde coloco mais de 1 opção para busca.
      OBS:
      - $buscaExata = no valor padrão ele é AND, quando eu marco ele altera para OR
      - eu preciso fazer um tipo de busca onde se eu colher a localidade e a equipe ele me mostre somente com essas duas condições!
      - com certeza meu codigo esta errado e não estou conseguindo fazer a logica dessa pesquisa
      - se eu selecionar todos os campos ele funciona,. porem quero só buscar 2 condições ou 3 condições não todas.
       
      CODIGO PRA BUSCA QUE TENHO
       
      $trechoPesquisa = filter_input(INPUT_POST, "trechoPesquisa"); $statusPesquisa = filter_input(INPUT_POST, "statusPesquisa"); $dataInicialPesquisa = filter_input(INPUT_POST, "dataInicialPesquisa"); $dataFinalPesquisa = filter_input(INPUT_POST, "dataFinalPesquisa"); $localidadePesquisa = filter_input(INPUT_POST, "localidadePesquisa"); $idEquipePesquisa = filter_input(INPUT_POST, "idEquipePesquisa"); $buscaExata = filter_input(INPUT_POST, "buscaExata" ); if(!$buscaExata){$buscaExata = 'OR';} $busca_query = $con->prepare("SELECT * FROM eventos WHERE status LIKE '%$statusPesquisa%' $buscaExata localidade LIKE '%$localidadePesquisa%' $buscaExata idEquipe LIKE '%$idEquipePesquisa%' $buscaExata dataEvento BETWEEN '$dataInicialPesquisa' AND '$dataFinalPesquisa'"); PRINT DA MINHA TELA DO FILTRO
       

×

Important Information

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