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);
[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
<!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<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"); } } }); }
