Avançar para o conteúdo principal

Atualizar uma página html com jquery

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

Comentários

Mensagens populares deste blogue

Vamos fazer um carro com o Unity 3D

Neste artigo vamos fazer um carro, simples, com o Unity 3D. A ideia é utilizar o motor de física do Unity 3D para simular o comportamento do carro. Os passos a seguir são: [1] - Criar um projeto novo

C# IEnumerable e IEnumerator

Neste artigo vamos aprender como utilizar a interface IEnumerator por forma a permitir utilizar um ciclo foreach num conjunto ou coleção de dados. A maior parte das coleções (listas e outras) já implementam a interface, mas neste caso vamos personalizar a maneira como percorremos a lista. Quando utilizamos código assim: foreach(Class c in Collection) { ... } O compilador converte este código em algo assim: IEnumerator cc = Collection.GetEnumerator() while(cc.MoveNext()) { c=(Class)cc.Current; ... } Ao implementar a interface IEnumerable significa que a classe implementa uma versão da função GetEnumerator() que deve devolver uma classe que implemente a interface IEnumerator. Vamos explorar um exemplo. Começamos pela classe client Esta classe permitirá guardar os dados dos clientes, existindo um campo para indicar se o cliente ainda está ativo ou não. De seguida temos uma classe que define uma lista de clientes e que implementa a interface IEnumerable que de

React - Introdução

 Neste post vamos fazer uma breve introdução ao React. React é uma framework javascript e por isso é importante ter conhecimentos desta linguagem de programação para melhor compreender o seu funcionamento. O que é necessário? Para construir páginas com React é necessário ter instalado a framework Node e o seu instalador de packages o npm. Com o Node instalado basta abrir uma janela da linha de comandos, eu aconselho utilizar o novo Windows Terminal ou o Cmder . Na sua linha de comando escolhida execute o comando: npx create-react-app Tutorial01 Este comando vai criar uma pasta com o nome Tutorial01 e instalar dos os ficheiros necessários para construir a sua primeira aplicação React dentro dessa pasta. De seguida entramos na pasta criada com o comando: cd Tutorial01 E iniciamos a aplicação com o comando: npm start Deve conseguir ver uma página com o seguinte aspeto: A partir daqui, até fechar a linha de comando, todas as alterações feitas aos ficheiros da sua aplicação são automaticam