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
[code language=”html”]
<!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>
[/code]
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
[code language=”html”]
<script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
[/code]
Depois disso criaremos uma página chamada de enviar.php com a seguinte estrutura
[code language=”php”]
<?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!’;
}
?>
[/code]
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
[code language=”javascript”]
<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>
[/code]
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.