Olá pessoal, tudo bom? Hoje, nesse artigo que foi sugerido, irei abordar mais uma opção de fazer uma requisição AJAX, agora com JQuery.
Como exemplo vou utilizar uma página onde o usuário pode deixar sua mensagem sem precisar dar refresh na página. Os arquivos estão disponíveis para download no final do arquivo. Vamos lá.
Veja o código em funcionamento
1. Banco de dados
Primeiramente, como sempre, vamos criar nossa base de dados e inserir alguns registros de exemplo:
CREATE TABLE IF NOT EXISTS `mensagens` ( `id` int(11) NOT NULL AUTO_INCREMENT, `nome` varchar(50) NOT NULL, `email` varchar(50) NOT NULL, `mensagem` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ; INSERT INTO `mensagens` (`id`, `nome`, `email`, `mensagem`) VALUES (1, 'faael', 'faelcalves@hotmail.com', 'Hello world!'), (2, 'Fulano', 'fulano@dominio.com', 'Olá Mundo!');
2. Conexão (conn.php)
Vamos criar também o arquivo responsável pela conexão com nosso banco de dados:
<?php
// Informações para conexão
$host = "localhost";
$usuario = "root";
$senha = "senha";
$banco = "banco";
// Realizando conexão e selecioando banco de dados
$conn = mysql_connect($host, $usuario, $senha) or die(mysql_error());
$db = mysql_select_db($banco, $conn) or die(mysql_error());
// Alterando o charset para utf8, para evitar problemas de acentuação
mysql_set_charset('utf8');
?>
Edite as informações de acordo com as configurações de seu banco de dados
3. A página (index.php)
Criaremos a base da nossa página, com algumas divs e o formulário:
<?php require_once("conn.php"); ?>
<!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>Envio de formulário sem refresh com JQuery/PHP</title>
</head>
<body>
<h1>Escrever Mensagem</h1>
<div id="status" style="display: none;"></div>
<div id="escrever">
<form id="formulario" action="javascript:func()" method="post">
<strong>Nome:</strong> <br />
<input name="nome" type="text" id="nome" size="35" /> <br /><br />
<strong>Email:</strong> <br />
<input name="email" type="text" id="email" size="35" /> <br /><br />
<strong>Mensagem:</strong> <br />
<input name="mensagem" type="text" id="mensagem" size="145" /><br /><br />
<input type="submit" value="Enviar" />
</form>
</div>
<h1>Mensagens</h1>
<div id="mensagens"></div>
</body>
</html>
Bom, agora vamos começar a trabalhar. Primeiramente, iremos baixar a biblioteca do jquery, clique aqui para baixar. Depois de baixado, vamos incluí-lo na nossa página, entre as tags <head></head>:
<script type="text/javascript" language="javascript" src="jquery-1.3.2.js"></script>
Inserido o jquery, vamos colocar as mensagens do banco de dados na div mensagens:
<div id="mensagens">
<?php
// Buscamos e exibimos as mensagens já contidas no banco de dados
$query = mysql_query("SELECT * FROM mensagens ORDER BY id DESC");
while($mensagem = mysql_fetch_object($query)) {
echo "<strong>" . $mensagem->nome . "</strong> disse: <em>" . $mensagem->mensagem . "</em><br />";
}
?>
</div>
Retornando no jquery, vamos agora criar a função que fará a requisição ajax, essa deverá estar entre as tags <head></head> também:
<script type="text/javascript" language="javascript">
$(function($) {
// Quando o formulário for enviado, essa função é chamada
$("#formulario").submit(function() {
// Colocamos os valores de cada campo em uma váriavel para facilitar a manipulação
var nome = $("#nome").val();
var email = $("#email").val();
var mensagem = $("#mensagem").val();
// Exibe mensagem de carregamento
$("#status").html("<img src='loader.gif' alt='Enviando' />");
// Fazemos a requisão ajax com o arquivo envia.php e enviamos os valores de cada campo através do método POST
$.post('envia.php', {nome: nome, email: email, mensagem: mensagem }, function(resposta) {
// Quando terminada a requisição
// Exibe a div status
$("#status").slideDown();
// Se a resposta é um erro
if (resposta != false) {
// Exibe o erro na div
$("#status").html(resposta);
}
// Se resposta for false, ou seja, não ocorreu nenhum erro
else {
// Exibe mensagem de sucesso
$("#status").html("Mensagem enviada com sucesso!");
// Coloca a mensagem no div de mensagens
$("#mensagens").prepend("<strong>"+ nome +"</strong> disse: <em>" + mensagem + "</em><br />");
// Limpando todos os campos
$("#nome").val("");
$("#email").val("");
$("#mensagem").val("");
}
});
});
});
</script>
É nessa função que praticamente tudo acontece. Vou tentar detalhar mais ela:
Linha 4: Chamamos a função quando o formulário é enviado, ou seja, no evento submit.
Linha 6,7,8: Colocamos os valores de cada campo do formulário em uma variável correspondente, para que assim facilite a manipulação desses valores.
Linha 10: Colocamos na div status a imagem de “carregando”. Você pode criar seus próprios “loaders” no ajaxload.info.
Linha 12: É aqui que chamamos o arquivo envia.php que fará a validação dos dados e, se corretos, a adição dos mesmos no banco de dados. No primeiro parâmetro, passamos o arquivo, no caso o envia.php; No segundo passamos os valores que serão passados pelo método POST; No terceiro chamamos a função que tratará da resposta no final da requisição.
Linha 15: Exibimos a div status com o efeito slideDown(); Lembrando que o display da div deve ser none, senão não haverá efeito.
Linha 17: Verificamos se a resposta é diferente de false, ou seja, se houve algum erro.
Linha 19: Se houver erro, a mensagem de erro é colocado na div status.
Linha 22: Se não houver nenhum erro na validação.
Linha 25: Colocamos na div status uma mensagem de sucesso.
Linha 27: Colocamos na div mensagens a nova mensagem que foi enviada. A propriedade prepend adiciona um conteúdo antes do conteúdo original da div.
Linha 29,30,31: Limpamos os campos do formulário.
4. PHP (envia.php)
Só restou criar o envia.php, que fará toda a validação dos dados e irá adicioná-los no banco de dados, pra quem conhece php, creio que não terá nenhuma novidade:
<?php
// Incluimos o arquivo de conexão
require_once("conn.php");
// Recuperamos os valores dos campos através do método POST
$nome = $_POST["nome"];
$email = $_POST["email"];
$mensagem = $_POST["mensagem"];
// Verifica se o nome foi preenchido
if (empty($nome)) {
echo "Escreva seu nome";
}
// Verifica se o email é válido
elseif (!eregi("^[a-z0-9_\.\-]+@[a-z0-9_\.\-]*[a-z0-9_\-]+\.[a-z]{2,4}$", $email)) {
echo "Digite um email válido";
}
// Verifica se a mensagem foi digitada
elseif (empty($mensagem)) {
echo "Escreva uma mensagem";
}
// Verifica se a mensagem nao ultrapassa o limite de caracteres
elseif (strlen($mensagem) > 140) {
echo "A mensagem deve ter no máximo 140 caracteres";
}
// Se não houver nenhum erro
else {
// Inserimos no banco de dados
$query = mysql_query("INSERT INTO mensagens VALUES ('', '".$nome."', '".$email."', '".$mensagem."')");
// Se inserido com sucesso
if ($query) {
echo false;
}
// Se houver algum erro ao inserir
else {
echo "Não foi possível inserir a mensagem no momento.";
}
}
?>
Aqui simplesmente verificamos se os dados são válidos e retornamos apenas uma resposta, ou seja, uma mensagem de erro ou um “false” (Esse valor define que tudo está correto);
5. Conclusão
Bom pessoal, é isso; tentei explicar da melhor forma possível de forma rápida. Espero que vocês tenham entendido, qualquer dúvida só entrar em contato, ok?
Abraços.
