Pular para o conteúdo
Início » Implementando jSon com PHP e jQuery, leitura e escrita [vídeo]

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

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:

Publicidade - O artigo continua após o banner

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&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

Saiba mais aqui!

"]

Veja também: