PHP + Ajax Utilizando JQuery

Utilizando a biblioteca JQuery para criar requisições HTTP  com PHP

PHP + Ajax Utilizando JQuery

Ia-e galerinha das noites mal-dormidas!!!

Se houve muito falar de Ajax, é ali e acolá…poem ajax no formulário, na foto, no microondas … é bonito mesmo mas é bom saber onde usar, lembro que quando comecei a experimentar a técnica meus programas em PHP tinham no máximo 5 linhas cada arquivo e já os arquivos JScript…. meo deos, milhares de linhas em JScript, dai o cara diz que não funcionou no navegador VelejePlus (rs)  dele… que chato!

Bem, eu utilizo a tecnica e acredito eu que com moderação, isso é importante!
Vamos ver um caso típico de uso de Ajax, no meu caso, lembrando que a idéia do Ajax também é a utilização de XML para transportar os dados, por isso não denomino o que eu faço como sendo Ajax pois não utilizaremos XML, ao menos neste caso, mas chega de lorotas!

Escolhi um caso simples, porém interessante para mostrar à vocês. Vamos criar um formulário HTML para envio de dados via POST para o PHP utilizando requisição Http ( ou ajax se preferir) onde o envio dos dados será verificada e deverá retornar um Array e caso não tenham sido enviados retornará uma mensagem/alerta. No geral parecerá com um tipo de validação do formulário em Ajax, mas a idéia é que vocês implementem a partir disso.

O velho e bom HTML vem aí !!!

<html>
<head>
<title>PHP e JQuery</title>
 <!– Inclui o Jquery –>
 <script src=”jquery-1.2.6.js”  type=”text/javascript“></script>
<!– Inclui o Actions que contém os comando escritos por nós –>
 <script src=”actions.js”  type=”text/javascript“></script>
<!– Inclui o CSS para dar uma corzinha –>
 <link href=”style.css”  type=”text/css”  rel=”stylesheet” />
</head>
<body>
<form name=”f”  id=”f”  onSubmit=”return false“>
<label>Nome:</label>
<input  type=”text”  name=”nome”  id=”nome“>
<label>Mail:</label>
<input type=”text”  name=”mail”  id=”mail“>
<br><br>
<button id=”btn1“>Consulta</button>
</form>
<p>&nbsp;</p>
<!–Div utilizada para exibir as mensagens Ajax –>
<div id=”d“></div>
</body>
</html>

Como podem ver é um arquivo HTML puro e simples, notem que não há no formulário o Method e Action responsáveis por informar como e para onde os dados serão enviados, isso nós definiremos no JScript a seguir, note também que não há nenhum evento no botão Consulta, também será definido no JS.
No inicio do HTML existe a chamada ao arquivo JQuery que é a bibilioteca que utilizaremos para instanciar o Ajax e também laguns eventos e efeitos, ao final do post informarei o link dos docs.  Temos ainda a chamada ao arquivo Actions.js que possui as chamadas à eventos e efeitos do Jquery  assim como a instancia do Ajax,  o arquivo JQuery nos não mexeremos, apenas fazemos o download e incluimos no programa, já o Actions nós escrevemos para utilizar os recursos do JQuery, como poderão ver logo.

Ok, temos apenas um formulário com alguns arquivos inclusos, precisamos agora de um arquivo PHP que receberá os dados do fomulário e devolverá uma mensagem que deverá ser tratada pelo JS e exibida na tela. Para tratar os dados utilizaremos o arquivo Actions(que escrevemos), o arquivo PHP que receberá os dados se chamará data.php e vamos ve-lo agora.

O arquivo Data.php

<?
# Evita o armazenamento em Cache
@header(“Content-Type: text/html; charset=iso-8859-1″);
@header(Cache-Control: no-cache, must-revalidate);
@header(Expires: Mon, 26 Jul 1997 05:00:00 GMT);
# Verifica se os dados foram enviados do form e retira o espaco em branco (trim)
if(trim($_POST[mail]) != “” && trim($_POST[nome]) != “”)
 {
# Adiciona os valores vindos do form em um Array
$arr[usuario][nome‘]  = $_POST[nome];
$arr[usuario][mail‘]     = $_POST[mail];
# Imprime o Array
  echo “<pre>”;
  print_r($arr);
  echo “</pre>”;

# Neste caso poderia ser um insert ou Validação no DB
 }
 else{
  # se os dados nao foram enviados 
  echo 1}
?>

Certo, vamos entender isso!
As linhas que contém o header servem para evitar que os dados fiquem em cache, como ao submiter os dados não haverá mudança de página e esse é o propósito do programa, evitar que o envio dependa dos dados serem enviados a outra página (POST), assim podemos mudar os valores do form tranquilamente e eles não serão armazenados no cache.

A linha que contem o IF está verificando se dados foram submetidos via post dos campos nome e email, caso sim ele remove os espaços contidos nas variáveis com o TRIM, em seguida monta um Array e armazena os dados vindos no form, na linha abaixo o Print_r printa o Array na tela.  Claro que ao, digamos, validar as informações (neste caso foi o minimo possível) poderiamos enviar os dados (no caso nome e email vindo do form) para um BD ou qualquer outra coisa, mas fizemos isso apenas para demonstrar com o minimo de programação o resultado que esperamos.

No caso o ELSE, quer dizer que nenhum dado foi submetido do formulário e por isso nós retornamos uma mensagem  o valor 1 que no JS será substituido pela mensagem “Preencha os campos”. Agora, veremos o arquivo que faz tudo acontecer dinâmicamente e que com certeza é o único chato de explicar caso você ainda não tenha tido nenhum contato com JQuery!
Só para resumir a grosso modo o que é o JQuery (para quem não sabe), é o seguinte… ele realiza com comandos pequenos e funções o que teriamos que fazer em dezenas de linhas utilizando o JS puro.
Por ex:
Para adicionar  uma classe CSS de um elemento HTML usando JS puro teriamos mais ou menos o que segue abaixo…
obj = document.getElementById(“form1”);
obj.className = ‘ClasseCSS’;

O arquivo PHP está bem pequeno e não faz tanta coisa em nosso exemplo, mas servirá bem para lhes dar uma direção.

Para fazermos a mesma coisa com o JQuery é necessário apenas:
$(“#form1”).addClass(“ClasseCSS”)
Um outro exemplo que até usaremos no post é o bloco utilizado para recuperar dados do formulário

Em JS puro ficaria assim:
nome = document.form1.nome.value;

Com JQuery fica assim:
nome = $(‘#nome’).val()

Entendeu mais ou menos? Agora imagine algo como uma animação, pois é … o JQuery faz com uma única linha!
Não deixe de ver os docs senão você não fará muita coisa ou nada!

O arquivo Actions.js (prepare-se para ler os comentários do código)

// Mesmo que window.onload
$(document).ready(function ()
{
 // cria um evento no click no botao btn1
 $(“#btn1”).click(function(){sendform()})
})

// Funcao que recupera e envia os dados para o data.php via post
function sendform()
{
 // recupera os dados do form
 fnome = $(‘#nome‘).val()
fmail = $(‘#mail‘).val()
 // instancia o ajax via post informando o destino no caso data.php
$.post(“data.php“,
 // envia os dados do form nas variaveis nome e mail
{nome: fnome, mail: fmail},
// recupera as informacoes vindas do data.php
function(data)
 {
// se retornou 1 entao os dados nao foram enviados
if(data == 1)
{
  // remove a classe css sucess da div
$(“#d“).removeClass(“sucess“)
// adiciona a classe error da div
  $(“#d“).addClass(“error“)
// insere na div o conteudo/mensagem de erro
$(“#d“).html(“Preencha todos os campos!“)
   }
else{

// se nao retornou 1 entao os dados foram enviados
// remove a classe error da div
   $(“#d“).removeClass(“error“)
// adiciona a classe sucess na div
$(“#d“).addClass(“sucess“)
// insere o conteudo vindo do data.php na div
   $(“#d“).html(data);
   }
// torna a div invisivel
$(“#d“).css(“display“,”none“);
// torna a div visivel usando o efeito show com a slow de parametro
$(“#d“).show(“slow“);
 }
)

// efeito show na div
$(“#d“).show(“slow“);
}

É amiguinhos, viram ai ? tem bastante  JS mas o resultado é bacana, bem acho que deu para entender por que se deve utilizar isso com moderação… Talvez para não ficar 50% do projeto programando em JS e olhem que utilizamos o Jquery senão essas linhas de JS seriam no minimo o dobro do que foram apresentadas. 

Bom, agora você que tem o raciocinio aguçado me pergunta:
– Por que não validar os campos vazios no JS sem a necessidade de enviar ao data.php ?
E te respondo, a idéia não é validar e sim implentar algo dentro do IF, neste caso usamos apenas a atribuição dos valores do form em um Array mas como já disse poderia ser um UPDATE, INSERT, DELETE no seu banco de dados, basta implementar algo a partir daí!

 Links:

Então, por enquanto é isso, boa sorte à todos !!!

Abraços,

Rafael Clares,

Comments

  1. Responder

  2. By Jadson

    Responder

  3. By andre

    Responder

    • Responder

  4. By Pedro

    Responder

    • Responder

  5. By Márcio

    Responder

  6. By anderson

    Responder

  7. By Carlos

    Responder

  8. By Saulo

    Responder

  9. Responder

    • Responder

  10. Responder

    • Responder

  11. By Alan

    Responder

  12. By Wesley

    Responder

    • Responder

  13. By Matheus

    Responder

  14. By Geison

    Responder

  15. By max

    Responder

  16. By Robert

    Responder

  17. By Andre Luis

    Responder

Perguntas duplicadas ou cujo a resposta esteja nos comentários serão ignoradas.
Comentários com códigos serão ignorados(para isso, use o pastebin.com e informe aqui o link).
Faça sua pergunta e "aguarde" ser aprovada para aparecer no blog.
Aguarde sua resposta, ela não é em tempo real, tenha paciência!

Deixe seu comentário