Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Andre Gustavo SR

Como utilizar dados após o retorno do .post em javascript

Por , em Javascript

Recommended Posts

Andre Gustavo SR    0

Andre Gustavo SR
Postado

Estou tentando fazer uma agenda simples, mas estou utilizando o jquery para fazer a busca e ir mostrando os resultados filtrados abaixo em uma tabela, já consegui realizar a busca e retornar os dados de volta ao javascript mas não consigo pegá-los para gera a tabela, no PHP utilizo json_encode, no javascript consigo ver os dados mas não manipula-los. Como utilizar os dados vindo de um array do .post do jquery para gerar uma tabela em javascript ou converter os dados para um array php?

Compartilhar este post

Link para o post
Compartilhar em outros sites

israelpereira96    5

israelpereira96
Postado 
[...] faz a consulta trasforma em array ai



$datas = [];
foreach($arrayData as $result){
  $datas[] = array(
    'nome' => $result['nome'],
    'idade' => $result['idade'] 
  );
}

die(json_encode(array('datas' => $datas)));

var html_fixed = '<table>'
                 + '<thead>'
                  + '<tr>'
                   + '<th>Nome</th>'
                   + '<th>Idade</th>'
                  + '</tr>'
                 + '</thead>';

var html_generate = '';

window.builTable = function(nome, idade){
 return '<tbody>'  
       + '<tr>'
       + '<td>'+nome+'</td>' 
       + '<td>'+nome+'</td>'
       + '</tr>'
       + '</tbody>';
)};

$.post('path_php.php', objeto, function(datas){
  var objJSON = $.parseJSON(datas);

  $.each(objJSON.datas, function(index, result){
    html_generate += buildTable(
           result.nome, // nome o indice do objeto que voce passa no php
           result.idade  
    );
  });
  
  html_fixed += html_generate;
  html_fixed += '</table>';
  
  $('div').append(html_fixed);
});

espero que ajude esse exemplo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andre Gustavo SR    0

Andre Gustavo SR
Postado

poderia ajudar no meu codigo? não estou consrguindo adaptar ao meu,

o meu esta quase pronto, consigo ver o array no index, consigo pesquidar, só falta ver como pegar as informações isoladas para montar a tabela


<?php
	require_once("conexao.php");
?>
<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Agenda Telefonica</title>
		<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/style.css" />
		<script src="bootstrap/dist/js/jquery.js" type="text/javascript"></script>
		<script src="bootstrap/dist/js/global.js" type="text/javascript"></script>
	</head>
	<body>
		<div class="container">
			<br />
			<h1 class="text-center">
				<span class="glyphicon glyphicon glyphicon-list-alt" aria-hidden="true"></span> Agenda Telefônica
			</h1> <br />
			
			<!--***************************************-->
			<div id="miniContainer">
				<div class="form-group">
					<span class="glyphicon glyphicon glyphicon-user" aria-hidden="true"></span>
					<a href="cadastrar.php">Novo contato</a>
				</div>
				
			
				 <form class="navbar-form navbar-right" role="search">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Pesquisar por nome" autofocus maxlength="40" id="txtBusca" name="txtBusca" />
					</div>
					<button type="submit" class="btn btn-default" id="btnBusca">Pesquisar</button>
				</form>
			<!--***************************************-->
			
						
			<!--Lista de contatos-->
				<table class="table table-hover" id="lista">
				<thead>
					<tr class="bg-primary">
						<th class="col-md-5">Nome</th>
						<th class="col-md-2">Telefone</th>
						<th colspan="2" class="col-md-1 text-center">Editar</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
			</div>
		</div>
		<div id="footer">
		
		</div>
		<script>
			$(document).ready(function(){
			$("#txtBusca").keyup(function(){
				var pesquisa = $(this).val();
				$.post("busca.php", {pesquisa : pesquisa}, function(data){
					$("tbody").text(data);
				});
			});
		});
		</script>
		
		
	</body>
</html>

$(document).ready(function(){
$("#txtBusca").keyup(function(){
var pesquisa = $(this).val();
$.post("busca.php", {pesquisa : pesquisa}, function(data){
//essa parte aqui que nao consigo, pode estar errado o array.

$("tbody").text("<tr><td>"data.nome_usuario"</td></tr>");
});
});
});


<?php
	require_once('conexao.php');
	$pesquisa = $_POST['pesquisa'];
	//$pesquisa = "andre";
	$q = "SELECT id_usuario, nome_usuario, tel_usuario FROM usuarios WHERE nome_usuario LIKE '%$pesquisa%' ORDER BY nome_usuario LIMIT 10";
	//$q = "SELECT id_usuario, nome_usuario, tel_usuario FROM usuarios WHERE nome_usuario LIKE '%$pesquisa%' ORDER BY nome_usuario LIMIT 10";
	$r = mysqli_query($con, $q);
	
	// while ($row = mysqli_fetch_assoc($r)) {
		// $dados[] =array(
			// 'id'   =>$row['id_usuario'] , 
			// 'name' =>$row['nome_usuario'], 
			// 'tel'  =>$row['tel_usuario'], 
		// );
	// }
	$dados = [];
	foreach($r as $result){
	  $dados[] = array(
			'id'   =>$result['id_usuario'] , 
			'name' =>$result['nome_usuario'], 
			'tel'  =>$result['tel_usuario'] 
	  );
	}
	
	$r = json_encode($dados);
	echo $r;

Compartilhar este post

Link para o post
Compartilhar em outros sites

israelpereira96    5

israelpereira96
Postado 
$(document).ready(function(){
    $("#txtBusca").keyup(function(){
        var pesquisa = $(this).val();
        $.post("busca.php", {pesquisa : pesquisa}, function(data){ // <- data é oque voce esta
                                                                   // enviando para o php 
             
              $("tbody").text("<tr><td>"data.nome_usuario"</td></tr>"); // entao aqui voce está                                                                        // printando oque esta sendo 
                                                                 // enviado e não a consulta 
        });
    });
});

Tente assim:

var html_fixed = '<table>'
                 + '<thead>'
                  + '<tr>'
                   + '<th>Nome</th>'
                   + '<th>Idade</th>'
                   + '<th>Editar</th>'
                  + '</tr>'
                 + '</thead>';

var html_generate = '';

window.preenchercampos = function(id, nome, telefone){
 $('input[name="nome"]').val(nome);
 $('input[name="telefone"]').val(telefone);
 $('input[type="hidden"]').val(id);

};

window.builTable = function(id,nome, telefone){
 return '<tbody>'  
       + '<tr>'
       + '<td>'+nome+'</td>' 
       + '<td>'+telefone+'</td>'
       + '<td><a data-toggle="modal" data-target="#modal"'
         + 'onclick="preenchercampos(\''+id+'\',\''+nome+'\',\''+telefone+'\);">'
       + 'Editar</a></td>'
       + '</tr>'
       + '</tbody>';
)};

$.post('path_php.php', objeto, function(datas){ // isso é o envio para o php
console.log(data); 
  var objJSON = $.parseJSON(datas); // isso é o retorno do php
console.log(objJSON); // experimente olhar
  $.each(objJSON, function(index, result){
    html_generate += buildTable(
           result.nome, // nome o indice do objeto que voce passa no php
           result.telefone  
    );
  });
  
  html_fixed += html_generate;
  html_fixed += '</table>';
  
  $('div').append(html_fixed);
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andre Gustavo SR    0

Andre Gustavo SR
Postado

Obrigado pela força, vou continuar sim, descobri que o retorno é uma string e não um array por isso não estou conseguindo montar a tabela, poderia fazer uma adaptação para fazer o array com split() mas é muita gambiarra pra pouco resultado, vou tentar de outras formas pra ver se retorna um json ou um array, quando conseguir isso ficara fácil terminar. Obrigado pela ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito