Hoje estou postando um vídeo tutorial para quem ainda não conhece jSon, poder entender o funcionamento básico do compartilhamento de dados usando essa tecnologia.Como base, usaremos o PHP e o jQuery (ótima biblioteca Javascript).
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.
Aproveite e deixe um comentário aqui em baixo, ou no YouTube e assine o nosso canal!
Script para criar a tabela no postgres:
CREATE TABLE jogos ( id serial NOT NULL, nome text, console text, preco numeric(10,2) )
dados.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>
script.js:
/**
* 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 += "<tr>";
itens += "<td>" + retorno[i].id + "</td>";
itens += "<td>" + retorno[i].nome + "</td>";
itens += "<td>" + retorno[i].console + "</td>";
itens += "<td>" + retorno[i].preco + "</td>";
itens += "</tr>";
}
//Preencher a Tabela
$("#minhaTabela tbody").html(itens);
//Limpar Status de Carregando
$("h2").html("Carregado");
}
}
});
}
Deixe um comentário para Anne Graziely Cancelar resposta