Programação,Tutoriais -
Implementando a Integração entre PHP + jQuery + jSon
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="https://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"); } } }); }