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> </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:
Abraços,
Muito bom teu script, simples e funcional.
abraços
Parabéns cara! Simples, direto, e bem explicado.
Abração!
cara bom script mais eu baixei para executar local e no fire fox ficou blz mais no ie deu uns bugs…..
Olá Andre, utilizo o IE 7 e 8 testei agora não houveram erros, obrigado pelo comentário;
Olá a todos!
estou com uma duvida, gostaria de saber como faço a seguinte estrutura.
estou a criar um sistema de Newsletter, e tou com um problema, quando envio a newsletter queria que ficasse a enviar para 8 pessoas de cada vez, e que fosse mostrando os emails enviados. pronto até ai tudo bem o meu problema é que não sei fazer um Countdown e um ajax para ir escrevendo os emails enviados.
Penso que terá de ser utilizado jquery para fazer um countdown e quando chegar ao fim envia através de ajax 8 emails e reinicia o countdown, quando já não houver emails para enviar retorna do ajax que finalizou e para o coutdown.
Se alguém me pudesse ajudar!
Obrigado
Pedro, tenta postar o trecho que envia o email, apenas esse trecho para podermos ver.
Abs
Muito bom o post, Rafael! Para quem tá criando coragem (eu) para estudar JQuery, é um ótimo ponto de partida! Pois tem uma linguagem mais agradável e limpa, o que as vezes não acontece na documentação.
Um abraço!
Parabéns pelo site( layout invejável) e obrigado pelo tutorial. Todos os exemplos que vi sobre ajax e jquery eram complexos demais para alguém que está somente agora introduzindo-se nessa parte. Com esse exemplo já deu para praticar um pouco, agora é só entender melhor e partir para algo mais complexo.
Valeu mesmo! Abraços!
Muito bom o post.
É difícil achar conteúdo explicativo sobre ajax e jquery
Nossa estava precisando disso eu fiz vários testes e funciona mesmo… valeu…
Parabéns muito bom o tutorial, deixo uma dica para otimização!
No JSON quando passa os dados, em vez de passar um a um, você pode usar
var dados = $(“form”).serialize();
Passando apenas a variável dados, esta por sinal tem todo o conteúdo dos campos do form, assim do outro lado no PHP é so resgatar os dados
$dados = $_POST[‘dados’];
e dar um parse_str() para transformar a string recebida em um array para facilitar a vida!
parse_str( $dados, $dados );
Abraço e mais uma vez parabéns pela iniciativa de disseminar conteúdo de desenvolvimento.
Opa, muito obrigado pelo comentário e contribuição!
Bem, esse post do jQuery é mesmo algo introdutório e básico para pessoas mais leigas que eu, a idéia é mostrar a utilização padrão.
Pensei em fazer uma série de post’s até chegar em sua dica de otimização, na verdade eu falo sobre o serialize no post seguinte:
http://clares.wordpress.com/2011/05/11/jquery-calcular-produtosvalores-do-formulario/
Mais uma vez, agradeço por ter contribuido.
Um forte abraço e até logo!
Só praavisar,para aqueles que estão com problemas no arquivo data.php…
ta faltando o <?PHP no inicio do aquivo…
abraços
Jonathan, cara valeu… preciso parar com essa mania maldita de achar que todo mundo configurou o short_tags no PHP.ini.
Vou me atentar mais à isso.
Abraços
Nossa cara, valeu pela dica, tava que nem loco atrás de como fazer algo assim..hehe
Parabens pelo post!!
Oi Rafael, blz?
Seu script funciona corretamente, mas tentei executa-lo remotamente onde adiciono somente o arquivo jquery e o código do JS em um domínio e tento executar e trazer a resposta gerada pelo php que está em outro domínio e não deu certo, como faço para que funcione, seria tipo um widget, você saberia me informar como fazer este widget ou você possui algum tutorial mostrando como faz, já procurei muito na internet e ainda não conseguir, valeu.
Wesley, beleza!
Acredito que você esteja fazendo correto!
Faça esse teste:
– No 1º domínio o código PHP (arquivo foo.php)
echo $_POST[‘mail’];
– No 2º domínio o JQuery (baz.js)
var url = ‘http://dominio_1.com.br/foo.php’
var mail = ‘[email protected]’
$.post( url , { mail:mail } , function(data) { alert(data) } )
Esse script você pode salvar até no seu desktop para testar!
Se tudo der errado você, adiciona no seu PHP.ini dos 2 dominios a linha:
allow_url_fopen=on
Se não tiver nenhum php.ini crie um com essa linha
Abraços e boa sorte!
aqui não roda nada ! ele não entra na fuction !
Boa didática, de alto entendimento e fácil acompanhamento.
Parabéns!
Muito Legal,
Uma maneira simples e didática de entender o Jquery
Parabens
Show man, mando bem!!!
Nossa cara fui obrigado a salvar seu site nos favoritos… Vc manda muito bem! Parabéns!!!