Como pegar o retorno do ajax e mostrar na tela

Jefferson andre · Janeiro 18, 2020

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

ShadowDLL · Janeiro 18, 2020

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/

Jefferson andre · Janeiro 19, 2020

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

ShadowDLL · Janeiro 19, 2020

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>

Jefferson andre · Janeiro 19, 2020

Muito obrigado, vou estudar suas informacoes.

ShadowDLL · Janeiro 20, 2020

Disponível ^^

Entrar

Como pegar o retorno do ajax e mostrar na tela

Recommended Posts

Jefferson andre 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

ShadowDLL 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jefferson andre 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

ShadowDLL 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jefferson andre 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

ShadowDLL 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Javascript - Passar Parâmetros para uma Função.

Tem como JS executar/chamar um programa externo?

PHP+Codeigniter - Importar Dados de uma Tabela para outra - MySql

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante