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,
1º 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.
2º nos conectando ao MySql, sem validações, não é o foco.
3º executamos a query
4º 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,
Muito obrigado cara! Precisava muito disso! Muito melhor que a documentação do jQuery =S
Finalmente consegui criar um chat que preste para o meu site! Vlw!
Quebrou uma árvore!
Mto bom, parabéns!
Abraço!
Muito didático esse post! Parabéns!
E se eu quisesse retornar valores do BD ao invés de status, como seria?
Grato
João
João, essa parte será abordado na part III, só peço um pouco de paciência porque meu tempo tá corrido demais.
Tentarei escrever esse post na próxima semana, ok?
Daí veremos como retornar um consulta e preencher uma tela com os dados retornados.
Abraços
Belo post e ainda bem que tem o tema mobile.
obrigado
Boa noite Rafael…
Muito obrigado pela oportunidade de ler seu blog!
Estou tentando fazer este exemplo acima e não dá certo?
O que posso estar fazendo de errado?
Copiei exatamente o que você escreveu…
Espero que possa me ajudar.
Obrigado.
Carlos, seria interessante você descrever o erro… outra coisa, se copiou o código, atente-se aos apostrofos e aspas, as vezes ao copiar eles ficam com caracteres inválidos.
De toda forma, se puder, descreva o erro ou até mesmo coloque o link do exemplo para que eu possa ajuda-lo.
abs
Boa noite Rafael….
Acho que estou fazendo algo errado e não encontro o bendito erro.
Não entendi o processo inteiro ainda….
HTML
—————————————————————————————————————-
Untitled Document
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, username: username, senha: senha},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’)
}
}
}
Nome:
Username:
Senha:
Add User
———————————————————————————————–
PHP
———————————————————————————————-
————————————————————————-
Rapaz, esse trecho username: username, senha: senha de onde você está obtendo os valores para senha e username ?
Você está tentando enviar dados em vars inexistentes
se ao menos tivesse um
var username = $(‘#username’).val()
var senha = $(‘#senha’).val()
já mudaria o cenário…
Carlos, sempre utilize o Firefox para testar JQuery, deixe aberta a janela “console de erros” do firefox … para ver onde ocorre o erro, no seu caso, se o código é esse que enviou, então username e senha não existem dentro da função addUser()
Se existe, faça o seguinte, sempre dê um “ALERT” no retorno do JQuery para saber o que está retornando do PHP, exemplo
$.post(‘data.php’,{nome: nome, username: username, senha: senha},function(data){
alert(data)
//resto do codigo
depois que se certificar que as vars sao enviadas e o PHP está recebendo normalmente daí você tira o alert(data)
Abs
Segue aí um esquema pra você testar suas funções de post
//JS
$.post(“data.php”,{email:email},function(data){
alert(data)
})
//PHP data.php
print_r($_POST);
Assim você vê tudo que está sendo enviado ao PHP.
Tem como usar esse método na mesma pagina junto com php sem atualizar a página?
É isso que script faz.
Mas eu digo no mesmo arquivo sem criar 2..
Sim, no mesmo arquivo, você precisa criar um método para cada ação. Nesse exemplo você tem o método addUser, pode criar outro método no javascript;
Parabéns cara… muito explicativo!!
Gostaria de saber se vc pode fazer um exemplo de um CRUD completo de cadastro de usuários!
obrigado
Olá Rafael,
Sou iniciante em php e jquery e gostaria de saber se você tem algum tutorial onde ensina fazer uma busca no banco de dados mysql com jquery e php.
Busca que venha de um formulário onde todos os dados são passados por e o resultado é apresentado em uma nova página e não na mesma do formulário?
Obrigado!