Neste post vamos implementar uma página web que atualiza o seu conteúdo sem ter de recarregar a página toda.
A estrutura básica da página tem as seguintes pastas:
\ajax - pasta com ficheiro php que pesquisa a base de dados e devolve o valor encontrado
\db - pasta com ficheiro php com instruções para ligação à base dados
\js - pasta com código javascript que utiliza a livraria JQuery para atualizar o ficheiro index.html com os dados devolvidos pelo ficheiro php que pesquisa a base de dados.
O resultado final será:
Se a página fosse construída somente com código html ao clicar no botão "Pesquisar" o browser seria redirecionado para outra página ou para a mesma mas fazendo um reload.
Para implementarmos a página sem reload utilizamos código que vai alterar o DOM da página com os dados recolhidos na base de dados.
Começamos pela página principal, index.html, com o seguinte código:
<!DOCTYPE html>
<html>
<head>
<title>AJAX Database</title>
</head>
<body>
Nome: <input type="text" id="name">
<input type="submit" id="name-submit" value="Pesquisar">
<div id="name-data"></div>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="js/global.js"></script>
</body>
</html>
Neste código é importante recordar os nomes do botão (name-submit), o nome do campo de introdução de texto (name) e por fim o nome da div (name-data). Estes nomes são importantes porque vamos ter de nos referir a eles no código javascript.
Antes de continuarmos vamos criar a base de dados MySQL que vai conter o dados a apresentar.
Primeiro criar a base de dados com o seguinte comando:
create database ajaxdb;
Depois criar uma tabela com nome names, assim:
create table names(name_id int,name varchar(50),location varchar(50));
Agora que temos a base de dados podemos continuar.
Olhando para o código html apresentado encontramos uma referencia a um ficheiro global.js que se encontra na pasta js. Este ficheiro vai, utilizando javascript, implementar o método post através do controlo do clique com o rato no botão.
O código javascript tem uma particularidade com a qual estou pouco à vontade que são as funções callback anónimas, desde que comecei a ver código javascript com este tipo de funções fiquei espantado! Como é que alguém consegue perceber aquilo?! Assim vou apresentar duas versões do ficheiro global.js, uma sem funções anónimas muito mais fácil de entender e outra com as funções anónimas.
Ficheiro global.js, versão sem funções anónimas:
$('input#name-submit').on('click',f_click());
function f_click(){
var name = $('input#name').val();
if($.trim(name)!=''){
$.post('ajax/name.php',{name: name},f_recebe(data));
}
}
function f_recebe(data){
$('div#name-data').text(data);
}
A primeira linha associa a função f_click ao evento click do botão, ou seja, quando o utilizador clica no botão é chamada a dita função.
A função f_click começa por recolher o valor do campo de texto e guarda-o na variável name, como pretendemos que o valor esteja preenchido utilizamos a função trim para remover espaços em branco antes de verificar se está em branco.
Se tudo correu bem e existe um valor para pesquisar na base de dados utilizamos a função post para receber valores do servidor chamando uma página, neste caso a página name.php e passando o parâmetro name para a página. Definimos, ainda, uma função callback (f_recebe) para receber o resultado do servidor através do parâmetro data.
Dentro da função f_recebe colocamos o valor de data na div.
Antes de avançarmos para o PHP aqui fica o código da versão com funções callback anónimas:
$('input#name-submit').on('click',function(){
var name = $('input#name').val();
if($.trim(name)!=''){
$.post('ajax/name.php',{name: name},function(data){
$('div#name-data').text(data);
});
}
});
Agora o PHP, a página name.php, tem o seguinte código:
<?php
if(isset($_POST['name'])===true && empty($_POST['name'])===false){
require '../db/connect.php';
$query = mysql_query("
SELECT names.location
FROM names
WHERE names.name='".mysql_real_escape_string(trim($_POST['name']))."'
");
echo (mysql_num_rows($query)!==0) ? mysql_result($query,0,'location') : 'Nome não encontrado';
}
?>
Primeiro verificamos se o parâmetro name está preenchido, em caso afirmativo fazemos o require do ficheiro connect.php (ver código abaixo) e consultamos a base de dados com um select. O resultado da consulta é devolvido com a função echo.
O código do ficheiro connect.php é simples, estabelece a ligação à base de dados:
<?php
mysql_connect('localhost','utilizador','password');
mysql_select_db('ajaxdb');
?>
Assim temos uma página que consulta a base de dados e coloca o resultado dinamicamente na página sem recarregar a página, ao estilo gmail.
Fontes:
http://api.jquery.com/jQuery.post/
http://www.w3schools.com/jquery/jquery_syntax.asp
http://www.youtube.com/watch?v=Yb3c-HljFro
A estrutura básica da página tem as seguintes pastas:
\ajax - pasta com ficheiro php que pesquisa a base de dados e devolve o valor encontrado
\db - pasta com ficheiro php com instruções para ligação à base dados
\js - pasta com código javascript que utiliza a livraria JQuery para atualizar o ficheiro index.html com os dados devolvidos pelo ficheiro php que pesquisa a base de dados.
O resultado final será:
Se a página fosse construída somente com código html ao clicar no botão "Pesquisar" o browser seria redirecionado para outra página ou para a mesma mas fazendo um reload.
Para implementarmos a página sem reload utilizamos código que vai alterar o DOM da página com os dados recolhidos na base de dados.
Começamos pela página principal, index.html, com o seguinte código:
<!DOCTYPE html>
<html>
<head>
<title>AJAX Database</title>
</head>
<body>
Nome: <input type="text" id="name">
<input type="submit" id="name-submit" value="Pesquisar">
<div id="name-data"></div>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="js/global.js"></script>
</body>
</html>
Neste código é importante recordar os nomes do botão (name-submit), o nome do campo de introdução de texto (name) e por fim o nome da div (name-data). Estes nomes são importantes porque vamos ter de nos referir a eles no código javascript.
Antes de continuarmos vamos criar a base de dados MySQL que vai conter o dados a apresentar.
Primeiro criar a base de dados com o seguinte comando:
create database ajaxdb;
Depois criar uma tabela com nome names, assim:
create table names(name_id int,name varchar(50),location varchar(50));
Agora que temos a base de dados podemos continuar.
Olhando para o código html apresentado encontramos uma referencia a um ficheiro global.js que se encontra na pasta js. Este ficheiro vai, utilizando javascript, implementar o método post através do controlo do clique com o rato no botão.
O código javascript tem uma particularidade com a qual estou pouco à vontade que são as funções callback anónimas, desde que comecei a ver código javascript com este tipo de funções fiquei espantado! Como é que alguém consegue perceber aquilo?! Assim vou apresentar duas versões do ficheiro global.js, uma sem funções anónimas muito mais fácil de entender e outra com as funções anónimas.
Ficheiro global.js, versão sem funções anónimas:
$('input#name-submit').on('click',f_click());
function f_click(){
var name = $('input#name').val();
if($.trim(name)!=''){
$.post('ajax/name.php',{name: name},f_recebe(data));
}
}
function f_recebe(data){
$('div#name-data').text(data);
}
A primeira linha associa a função f_click ao evento click do botão, ou seja, quando o utilizador clica no botão é chamada a dita função.
A função f_click começa por recolher o valor do campo de texto e guarda-o na variável name, como pretendemos que o valor esteja preenchido utilizamos a função trim para remover espaços em branco antes de verificar se está em branco.
Se tudo correu bem e existe um valor para pesquisar na base de dados utilizamos a função post para receber valores do servidor chamando uma página, neste caso a página name.php e passando o parâmetro name para a página. Definimos, ainda, uma função callback (f_recebe) para receber o resultado do servidor através do parâmetro data.
Dentro da função f_recebe colocamos o valor de data na div.
Antes de avançarmos para o PHP aqui fica o código da versão com funções callback anónimas:
$('input#name-submit').on('click',function(){
var name = $('input#name').val();
if($.trim(name)!=''){
$.post('ajax/name.php',{name: name},function(data){
$('div#name-data').text(data);
});
}
});
Agora o PHP, a página name.php, tem o seguinte código:
<?php
if(isset($_POST['name'])===true && empty($_POST['name'])===false){
require '../db/connect.php';
$query = mysql_query("
SELECT names.location
FROM names
WHERE names.name='".mysql_real_escape_string(trim($_POST['name']))."'
");
echo (mysql_num_rows($query)!==0) ? mysql_result($query,0,'location') : 'Nome não encontrado';
}
?>
Primeiro verificamos se o parâmetro name está preenchido, em caso afirmativo fazemos o require do ficheiro connect.php (ver código abaixo) e consultamos a base de dados com um select. O resultado da consulta é devolvido com a função echo.
O código do ficheiro connect.php é simples, estabelece a ligação à base de dados:
<?php
mysql_connect('localhost','utilizador','password');
mysql_select_db('ajaxdb');
?>
Assim temos uma página que consulta a base de dados e coloca o resultado dinamicamente na página sem recarregar a página, ao estilo gmail.
Fontes:
http://api.jquery.com/jQuery.post/
http://www.w3schools.com/jquery/jquery_syntax.asp
http://www.youtube.com/watch?v=Yb3c-HljFro
Comentários
Enviar um comentário