Implementando jSon com PHP e jQuery, leitura e escrita [vídeo]

Por

sss

Publicidade - O artigo continua após o banner

Estou postando um vídeo tutorial para que vocês, que ainda não conhecem, possam entender o funcionamento básico do compartilhamento de dados usando jSon, usando o php e o jquery (ótima biblioteca Javascript);


Publicidade - O artigo continua após o banner

[yframe url=’http://www.youtube.com/watch?v=9x47niEJk_M’]

Claro que por se tratar de um vídeo não é tão fácil ficar acompanhando o código. Por isso mesmo, estamos disponibilizando aqui o código para que você possa entender.

Script para criar a tabela no postgres:

CREATE TABLE jogos
(
id serial NOT NULL,
nome text,
console text,
preco numeric(10,2)
)

dados/dados.php

<?php
/**
* Tutorial jSON
*/

//Definir formato de arquivo
header('Content-Type:' . "text/plain");

$host	= "localhost"; // IP do Banco
$user 	= "postgres"; // Usuário
$pswd 	= "postgres"; // Senha
$dbname	= "tutoriais"; // Banco
$con 	= null; // Conexão

$con = @pg_connect("host=$host user=$user password=$pswd dbname=$dbname") or die (pg_last_error($con));

//@pg_close($con); //Encerrrar Conexão

if(!$con) {
	echo '[{"erro": "Não foi possível conectar ao banco"';
	echo '}]';
}else {
	//SQL de BUSCA LISTAGEM
	$sql 	= "SELECT * FROM jogos ORDER BY console";
	$result = pg_query($sql); //Executar a SQL
	$n 		= pg_num_rows($result); //Número de Linhas retornadas

	if (!$result) {
		//Caso não haja retorno
		echo '[{"erro": "Há algum erro com a busca. Não retorna resultados"';
		echo '}]';
	}else if($n<1) {
		//Caso não tenha nenhum item
		echo '[{"erro": "Não há nenhum dado cadastrado"';
		echo '}]';
	}else {
		//Mesclar resultados em um array
		for($i = 0; $i<$n; $i++) {
			$dados[] = pg_fetch_assoc($result, $i);
		}

		echo json_encode($dados, JSON_PRETTY_PRINT);
	}
}
?>

index.html

Publicidade - O artigo continua após o banner

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="UTF-8">
		<link rel="icon" type="favicon.png" />
		<link rel="stylesheet" type="text/css" href="estilo.css">

		<!--jQuery-->
		<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
		<!--Script-->
		<script src="script.js" type="text/javascript"></script>

	</head>
	<body onload="carregarItens()">
		<section>
			<h1>PortilloDesign Tutorial JSON + PHP</h1>
			<!--Área que mostrará carregando-->
			<h2></h2>
			<!--Tabela-->
			<table id="minhaTabela">
				<caption>Cadastro de Jogos</caption>
				<thead>
					<th>ID</th>
					<th>Jogo</th>
					<th>Console</th>
					<th>Valor</th>
				</thead>
				<tbody>
				</tbody>
			</table>
		</section>
	</body>
</html>
/**
* Capturar itens do banco de dados
*/
function carregarItens(){
	//variáveis
	var itens = "", url = "dados/dados.php";

    //Capturar Dados Usando Método AJAX do jQuery
    $.ajax({
	    url: url,
	    cache: false,
	    dataType: "json",
	    beforeSend: function() {
		    $("h2").html("Carregando..."); //Carregando
	    },
	    error: function() {
		    $("h2").html("Há algum problema com a fonte de dados");
	    },
	    success: function(retorno) {
		    if(retorno[0].erro){
			    $("h2").html(retorno[0].erro);
		    }
		    else{
			    //Laço para criar linhas da tabela
			    for(var i = 0; i&lt;retorno.length; i++){
				    itens += "
";
				    itens += "" + retorno[i].id + "
"; itens += "" + retorno[i].nome + "

"; itens += "" + retorno[i].console + "

"; itens += "" + retorno[i].preco + "

"; itens += "

"; } //Preencher a Tabela $("#minhaTabela tbody").html(itens); //Limpar Status de Carregando $("h2").html("Carregado"); } } }); }

Fonte

O que você achou disso?

Clique nas estrelas

Média da classificação 0 / 5. Número de votos: 0

Publicidade - O artigo continua após o banner

Nenhum voto até agora! Seja o primeiro a avaliar este post.

Veja também:

3 comentários em “Implementando jSon com PHP e jQuery, leitura e escrita [vídeo]”

  2. Amigo,

    Não consegui implementar o seu código para testes. É necessário alguma configuração no apache? Poderia me ajudar?

    A conexão com o banco está retornando adequadamente os dados.

    Segue o código adaptado:
    /**
    * Capturar itens do banco de dados
    */
    function carregarItens(){
    //variáveis
    var itens = "", url = "contratos.php";

    //Capturar Dados Usando Método AJAX do jQuery
    $.ajax({
    url: url,
    cache: false,
    dataType: "json",
    beforeSend: function() {
    $("h2").html("Carregando…"); //Carregando
    },
    error: function() {
    $("h2").html("Há algum problema com a fonte de dados");
    },
    success: function(retorno) {
    if(retorno[0].erro){
    $("h2").html(retorno[0].erro);
    }
    else{
    //Laço para criar linhas da tabela
    for(var i = 0; i<retorno.length; i++){
    itens += "<tr>";
    itens += "<td>" + retorno[i].NU_CONTRATO + "</td>";
    itens += "<td>" + retorno[i].DT_INICIAL + "</td>";
    itens += "<td>" + retorno[i].DT_FINAL + "</td>";
    itens += "</tr>";
    }
    //Preencher a Tabela
    $("#minhaTabela tbody").html(itens);
    //Limpar Status de Carregando
    $("h2").html("Carregado");
    }
    }
    };

    /**
    * Capturar itens do banco de dados
    */
    function carregarItens(){
    //variáveis
    var itens = "", url = "contratos.php";

    //Capturar Dados Usando Método AJAX do jQuery
    $.ajax({
    url: url,
    cache: false,
    dataType: "json",
    beforeSend: function() {
    $("h2").html("Carregando…"); //Carregando
    },
    error: function() {
    $("h2").html("Há algum problema com a fonte de dados");
    },
    success: function(retorno) {
    if(retorno[0].erro){
    $("h2").html(retorno[0].erro);
    }
    else{
    //Laço para criar linhas da tabela
    for(var i = 0; i<retorno.length; i++){
    itens += "<tr>";
    itens += "<td>" + retorno[i].NU_CONTRATO + "</td>";
    itens += "<td>" + retorno[i].DT_INICIAL + "</td>";
    itens += "<td>" + retorno[i].DT_FINAL + "</td>";
    itens += "</tr>";
    }
    //Preencher a Tabela
    $("#minhaTabela tbody").html(itens);
    //Limpar Status de Carregando
    $("h2").html("Carregado");
    }
    }
    };

    Responder

  3. Parabéns muito bom o post. eu tentei fazer com mysql e não necessito classificar a tabela, porem tenho popular tds da tabela as quais tenho o ID formado por usuário, hora e minuto exemplo 1h10m30 esse seria um id pra 10:30 do usuário 1, no php esta gerando o json nessa estrutura {"AGENDA":[{"Hora":"08:00","usuario":"1","data_ag":"2014-03-29","codigo":"5661","nome":"Vinicius Teixeira","telefone":"92078187"}{"Hora":"08:30","usuario":"1","data_ag":"2014-03-29","codigo":"745","nome":"Emile Critina De Araujo Zier","telefone":"92957920"}{"Hora":"09:00","usuario":"1","data_ag":"2014-03-29","codigo":"2908","nome":"Catia Simone Almeida De LIma Santos","telefone":"84053736"}]} , acontece que o $.ajax não chama o php veja: $.Ajax({
    url: "reposit/ler_agenda.php",
    dataType: "json",
    success: function(retorno) {
    var result = retorno.AGENDA;
    Alert(result);
    if(retorno[0].error){alert ('erro no retorno');}
    else {
    for(var i = 0; i<result.length; i++){
    alert (result.usuario+' '+result.nome);
    }}}}); o que pode esta acontecendo?

    Responder

Deixe um comentário