Jump to content

POWERED BY:

Archived

This topic is now archived and is closed to further replies.

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

  • Similar Content

    • By luiz monteiro
      Olá, tudo bem?
       
      Estou melhorando meu conhecimento em php e mysql e, me deparei com o seguinte. A tabela da base de dados tem um campo do tipo varchar(8) o qual armazena números. Eu não posso alterar o tipo desse campo. O que preciso é fazer um select para retornar o números que contenham zeros a direita ou a esquerda.
      O que tentei até agora
       
      Ex1
      $busca = $conexao->prepare("select campo form tabela where (campo = :campo) ");
      $busca->bindParam('campo', $_REQUEST['campo_form']);
       
      Se a direita da string $_REQUEST['campo_form'] termina ou inicia com zero ou zeros, a busca retorna vazio.
      Inseri dados numéricos, da seguinte maneira para testar: 01234567;  12345670: 12345678: 12340000... entre outros nessa coluna. Todos os valores que não terminam ou não iniciam com zero ou zeros, o select funciona.
       
       
      Ex2
      $busca = $conexao->prepare("select campo form tabela where (campo = 0340000) ");
      Esse número está cadastrado, mas não retorna.
       
      Ex3
      $busca = $conexao->prepare("select campo form tabela where (campo = '02340001' ) ");
      Esse número está cadastrado, mas não retorna.
       
       
      Ex4
      $busca = $conexao->prepare("select campo form tabela where (campo like 2340000) ");
      Esse número está cadastrado, mas não retorna.
       
      Ex5
      $busca = $conexao->prepare("select campo form tabela where (campo like '12340000') ");
      Esse número está cadastrado, mas não retorna.
       
      Ex6
      $busca = $conexao->prepare("select campo form tabela where (campo like '"12340000"' ) ");
      Esse número está cadastrado, mas não retorna.
       
       
      Ex7
      $busca = $conexao->prepare("select campo form tabela where (campo like :campo) ");
      $busca->bindParam('campo', $_REQUEST['campo_form'])
      Não retorna dados.
       
      O  $_REQUEST['campo_form'] é envio via AJAX de um formulário. 
      Usei o gettype para verificar o post, e ele retorna string.
      Fiz uma busca com número 12345678 para verificar o que o select retorna, e também retrona como string.
       
      Esse tipo de varchar foi usado porque os números que serão gravados nesse campo,  terão zeros a direita ou na esquerda. Os tipos number do mysql não gravam zeros, então estou usando esse. O problema é a busca.
      Agradeço desde já.
       
       
    • By ILR master
      Fala galera, tudo certo?
       
      Seguinte: No servidor A estou tentando fazer uma consulta com o servidor B, mas está dando erro.
      Estou usando o mesmo código de conexão do servidor B que funciona perfeitamente, mas no servidor A, dá erro.
      Segue código:
       
      $host = 'servidor B';
      $user = 'user';
      $pass = '********';
      $db   = 'banco';
       
      // conexão e seleção do banco de dados
      $conexao = mysqlI_connect($host, $user, $pass, $db);
      mysqlI_set_charset($conexao,"utf8");
      //print "Conexão rodando e OK!"; 
      //mysqlI_close($conexao);
       
      Alguém pode me ajudar?
    • By douglas79
      Bom dia,

      Há alguns dias que venho instalar o apache, o php, mysql e o phpmyadmin manualmente e sem obter sucesso. Até consegui rodar o php, porém, quando vou baixar a úitima versão do MYSQL, não tem todos os pacotes nele instalados, inclusive no completo, só encontro o Router.
      Alguém pode me dizer o porquê que isso está ocorrendo?
      Desde já agradeço a ajuda de vocês, que será bem vinda!
      No aguardo!

      Uso a versão 8.3.9 do PHP
      Meu SO é o Windows 10 32 bits
    • By landerbadi
      Tenho uma tabela chamada "item" com os seguintes campos: id, name, active. Nela tem cadastrado vários itens. No campo "active" eu coloco a letra "S" para informar que este item está ativo no sistema. Por exemplo: 1, casa, S 2, mesa, S 3, cama, S 4, moto S 5, rádio O quinto registro "radio" não está ativo no sistema pois não tem um "S" no campo active. E outra tabela chamada "product" com os seguintes campos (id, name) com os seguintes registros: 1, Produto A 2, Produto B 3, Produto C E uma terceira tabela chamada "product_item" com os seguintes campos (productID, itemID). No campo productID eu coloco o id de um produto da tabela "product" e no campo "itemID" eu coloco o id do produto da tabela "item". Exemplo: 1, 1 1, 3 1, 4 2, 3 2, 4 Sendo assim o produto A da tabela 'product" comtem os itens casa, cama e moto. Eu preciso fazer uma busca da seguinte maneira:  Eu escolho um registro da tabela "item", por exemplo "casa". Preciso fazer com que o php me liste todos os registros da tabela "product" que contenham a palavra "casa" e que os demais itens estejam ativos no siste. Ou seja, que contenham um "S" no campo "active"  Eu consegui fazer isso da seguinte maneira: SELECT P.id, P.name, GROUP_CONCAT(I.name ORDER BY I.name) AS items FROM product P JOIN product_item PI ON P.id = PI.productID JOIN item I ON I.id = PI.itemID AND I.active = 'S' WHERE P.id NOT IN ( SELECT PI.productID FROM product_item PI JOIN item I ON I.id = PI.itemID WHERE I.active IS NULL ) AND P.id IN ( SELECT PI.productID FROM product_item PI JOIN item I ON I.id = PI.itemID WHERE I.name = 'mesa' ) GROUP BY P.id, P.name; O problema que eu estou tendo é o seguinte:
      Quando eu jogo este código para o banco de dados onde eu já tenho os registros cadastrado o php fica lendo uma eternidade e não lista os produtos.
       
      Usando código no banco de dados que eu fiz para testes ele funciona perfeitamente pois nele tem poucos registros.
       
      No banco de dados principal a tabela "item" tem 11.196 registros. A tabela "product" tem 88.214 registros e a tabela "product_item" tem 518.378 registros. 
       
      Eu acredito que, devido o banco de dados ser muito grande, ele não consegue listar.
       
      Alguém sabe de algum meio de resolver isso?
       
       
    • By luiz monteiro
      Olá. Tenho 3 formulários em uma mesma pagina, onde cada um tem 1 input type text.
      O que preciso é recuperar o nome desses inputs e o valor correspondente ao formulário submetido.
      =============
      form name="formulario1" id="formulario1"
      input type="text" name="nome1" value="valor1" /form
      form name="formulario2" id="formulario2"
      input type="text" name="nome2" value="valor2" /form
      form name="formulario3" id="formulario3"
      input type="text" name="nome3" value="valor3" /form
      =============
      ..........
      var formulario_submetido = document.getElementById("formulario1"); formulario_submetido.addEventListener('submit', function(e) { e.preventDefault(); //tentei console.log(document.querySelectorAll('#'+this.id + ' input').name); //tentei var formula = new FormData(formulario_submetido); console.log(formula.input['type=text'].name); //tentei console.log(formula.get(input['type=text']).name); ..........
        no console.log(e), ele está nessa hierarquia   form -> srcElement -> input -> attributes -> name 
      Como recupero o valor do name dele e o valor do value?
       
      Agradeço desde já.
×

Important Information

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