PHP + JQuery Part II

PHP + JQuery  Part II

Olá, dando continuidade ao post anterior
Já vimos como funciona basicamente o método $.post do JQuery, agora vamos utilizar o método val() para obter os dados do formulário e enviar ao PHP.
No arquivo PHP iremos inserir no banco de dados as informações do formulário HTML e retornar o status da transação ao JQuery.

Lembrando que por enquanto não iremos abordar validações tanto no JQuery quanto no PHP (aff, lembrei do Faustão, tanto no pessoal quanto no profissional), enfim, o que vamos ver serão os métodos de recuperação dos dados do form, envio ao PHP, retorno do PHP ao JQuery e mensagem de status para o usuário, por enquanto as mensagens serão no pobretão alert(), mais para frente vamos ver o JQuery aparecendo com os dialog box, mensagens com efeitos e a coisa toda, mas agora é importante nos concentrar nessa questão da “conversa entre as linguagens”.

JQuery não é difícil, mas para fazer algo  é preciso estar consciente dessa ligação entre as linguagens, envio, consulta, retorno, etc… Estando bom nessa parte já dá para brincar de JQuery Effects.
Acredito que a maior dificuldade para quem está chegando (como eu) é justamente essa, entender o que está enviando, para onde está enviando e onde recuperar essas informações.

Tenha em mente que a forma de programar o PHP não muda!
Em curtas palavras o JQuery, à princípio, não fará nada além de “pegar os dados no HTML”, “enviar ao PHP” e “exibir o retorno do PHP”.

Bem, acabou o culto, vamos ver  os códigos!

Primeiramente, vamos ver um simples formulário HTML.

<form id="add" name="add" method="post">
 <label>Nome: </label>
 <input id="nome" name="nome" type="text" />

 <label>Mail: </label>
 <input id="mail" name="mail" type="text" />

 <button id="bntAdd" onclick="return addUser()">Add User</button>
</form>

Antes de mais nada, uma dica muito importante!
Para tornar mais simples essa troca de informações entre as linguagens, utilize sempre os mesmos nomes em variáveis, campos do form e campos do SQL.
Isso facilita muito na hora da troca de dados entre HTML, JQuery, PHP e SQL.

Sobre o HTML:
– Repare que o botão Add User possui um ID (todos os elementos devem possuir name e id), por enquanto vamos passar o evento no elemento do botão, mas nos próximos exemplos iremos criar o evento no JQuery, atribuiremos o eventos através do ID do elemento ao invés de passar no onClick, isso irá produzir um HTML mais limpo.
– Os nomes dos campos do formulários são os mesmos da tabela  SQL, isso irá facilitar no PHP, dessa forma utilizaremos apenas o método extract() do PHP.

Vejamos agora o código JQuery


function addUser()
{
 // valor do campo nome no form
 nome = $('#nome').val()
 // valor do campo mail no form
 mail = $('#mail').val()
 // validações  (campo vazio, invalido, etc...)
 // codigo da validacao

 // enviando os dados do formulario via post
 $.post('data.php',{nome: nome, mail: mail},function(data){
 // verifica o retorno
 if(data == 0)
 {
 // igual à 0 ok
 alert('user add ok')
 }
 else
 {
 // diferente de 0 erro
 alert('erro ao adicionar user')
 }
 }
}

No JS temos apenas um método, addUser(), ele recupera os valores dos campos do formulário e envia ao PHP pelo método post que você já entendeu como funciona.
Lembrando que validações não são o foco agora, a idéia é entender o transporte dos dados de uma linguagem para outra.
Ah, o código JS está pobre ainda porque estamos apenas enviando/recebendo dados e exibindo os retornos no alert, mais para frente tornaremos isso mais elegante!

Para acessar os elementos via JQuery basta fazer: $(‘#nomeDoElemento’).metodo() – neste caso utilizamos o método val() que recupera o valor do campo.
Doc Jquery – método val()

Para entender a função addUser, repare que ele envia os dados ao PHP e verifica se o retorno do PHP é igual à 0(zero) ou 1 (um), de acordo com o retorno a mensagem é exibida no alert, mas isso você só irá entender ao ver o código PHP.

No geral, o que ocorre é que ao executar a query o PHP retorna (com echo) 0 ou 1, retorna 1 se a query não for bem sucedida!
A única coisa que muda na forma de programar no PHP com JQuery é que você não exibe mais os dados no PHP, quero dizer que você não imprime na tela através do PHP, nós o utilizamos códigos de status, ou seja, retornamos alguma informação ao JQuery onde iremos tratar a resposta ao usuário, seja uma mensagem de sucesso/falha ou para completar um formulário.
Por exemplo, nós enviamos um ID ao PHP que irá nos retornar um array em JS/JSON ou outra forma que possamos através do JQuery enviar à interface/HTML.

Vamos ver o arquivo PHP


<?php
 // extrai os dados do post
 extract($_POST);
 // monta a instrucao SQL
 $strSql = "insert into users (nome,email) values ('$nome','$mail')";
 // conexao com o banco
 $con = mysql_connect('host', 'user', 'pass');
 // seleciona o bd
 mysql_select_db('foo', $con);
 // executa a query
 $query = mysql_query("$strSql");
 // verifica status da query
 if($query)
 {
 // se bem sucedida
 echo 0;
 }
 else
 {
 // mal sucedida
 echo 1;
 }
?>

No PHP,
estamos recebendo os dados via POST e extraindo-os com o extract (se não costuma utilizar o extract, dê uma lida nesse post). Perceba que no insert estão as vars de mesmo nome, ou seja, os dados vindos do form são de mesmo nome que os dados da tabela sql, o extract transforma em var no PHP os dados vindos do post.

nos conectando ao MySql, sem validações, não é o foco.

executamos a query

se a query rodou certinho, ou seja, se houve a inserção no BD temos como retorno o Ø (zero) se houve falha temos o 1 como retorno, é apenas isso que o PHP irá retornar ao JQuery, na função addUser é que iremos tratar as mensagens ou ações com a interface/html/usuário.

Como eu disse, por enquanto esse retorno do PHP nos produz apenas um alert, no entanto, é o suficiente para entendermos essa troca de informações.
Claro que ao invés de retornar números/códigos você pode retornar mensagens no PHP, no entanto na hora de comparar no JQuery o status para dar uma resposta ao usuário pode ser um pouco confusa se precisar comparar mensagens, particularmente utilizo nesse formato que apresentei e no JQuery retorno o status de acordo com o retorno vindo do PHP, ex:

retorno = 0 : Sucesso ao executar
retorno = 1 : Erro ao executar o procedimento
retorno <> de 0 ou 1 : exibir a mensagem original do PHP, ou seja, alert(data), onde data será sempre o retorno do PHP, mesmo que seja um erro de conexão ou qualquer outra informação.

Sendo “retorno” a var “data” que está como parâmetro no método addUser ( function(data) ).

Acho que por agora é só isso mesmo, mas vai ficar legal à medida em que passarmos a ver mais códigos que explicação.

Até agora só estamos entendendo como funciona, logo iremos ver o que é possível fazer de funcional.

abraços,

Part I do post

Comments

  1. By João

  2. By Carlos

  3. By Carlos

  4. By Carlos

  5. By rafael

      • By rafale

  6. By Fabio

%d blogueiros gostam disto: