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:
1 2 3 4 5 6 7 8 9 10 11 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 | <?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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <?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>:
1 | <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:
1 2 3 4 5 6 7 8 9 | <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <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 propriedadeprepend 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <?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?
Download dos arquivos
Abraços.
