Jquery + Ajax + PHP
No post – Jquery, introdução – anterior a este falei um pouco sobre Jquery, como o titulo diz, uma breve introdução, hoje falarei sobre o uso de jQuery + Ajax + PHP.
Em breve exemplo usarei o envio de formulário, deixarei a validação do mesmo para um post posterior.
Primeiramente acesse este link http://docs.jquery.com/Downloading_jQuery, e faça o download da versão mais recente da JQuery.
Seguindo a estrutura html básica
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Post - Erick Alves</title> <script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script> </head> <body> <form action="#" method="post"> <label>Nome: <input type="text" name="nome" id="nome" /></label> <label>Email: <input type="text" name="email" id="email" /></label> <label>Telefone: <input type="text" name="telefone" id="telefone" /></label> <input type="button" value="Enviar" id="enviar" /> </form> <div id="resposta"></div> </body> </html>
Neste html eu criei um formulario com os campos, nome, email e telefone, respectivamente cada um com seu id, para utilizarmos eles no jQuery.
Entres as tags <head></head> eu inseri o jQuery
<script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
Depois disso criaremos uma página chamada de enviar.php com a seguinte estrutura
<?php
// recebo os campos via $_POST[''];
$nome = $_POST['nome'];
$email = $_POST['email'];
$telefone = $_POST['telefone'];
// verifico se estão preenchidos
if (!($nome) || !($email) || !($telefone)){
echo 'Preencha todos os campos!';
exit();
}
//Abrindo Conexao com o banco de dados
$conexao = mysql_pconnect("localhost","usuario","senha") or die (mysql_error());
$banco = mysql_select_db("bancodedados");
//Utilizando o mysql_real_escape_string voce se protege o seu código contra SQL Injection.
$nome = mysql_real_escape_string($nome);
$email = mysql_real_escape_string($email);
$telefone = mysql_real_escape_string($telefone);
$insert = mysql_query("insert into contatos (nome,email,telefone) values ('{$nome}','{$email}','{$telefone}')");
mysql_close($conexao);
if($insert) {
echo 'Cadastro Realizado!';
}else {
echo 'Erro ao Cadastrar!';
}
?>
O exemplo acima está auto comentado e de fácil entendimento.
E agora? O formulario não vai funcionar pois não estamos setando nenhum action nele. Isso é importante para o funcionamento dele via jQuery.
Utilizaremos agora a função click do jQuery, instanciando o elemento de id “enviar“, no caso do formulario html o botão de envio.
Receberemos os valores dos campos de id:
- nome
- telefone
Feito isso, teremos a função post do jQuery, requisitando dados no envia.php e passando como paramentro nossos campos.
Instanciamos o elemento de id “resposta” para receber o retorno do nosso ajax.
Tudo isso é feito utilizando o script jQuery abaixo
<script type="text/javascript">
$(document).ready(function() {
$("#enviar").click(function() {
var nome = $("#nome");
var nomePost = nome.val();
var email = $("#email");
var emailPost = email.val();
var telefone = $("#telefone");
var telefonePost = telefone.val();
$.post("enviar.php", {nome: nomePost, email: emailPost, telefone: telefonePost},
function(data){
$("#resposta").html(data);
}
, "html");
});
});
</script>
Que deve ser inserido entre as tags head do seu html.
Fim…
Temos também no jQuery outros modos de enviar requisições ajax, como a própria funçao $.ajax().
Mas deixarei isso para outro post, assim como as validações.
Bem isso é tudo pessoal.
