Envio de formulário sem refresh com JQuery/PHP

9 de outubro de 2009

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?

Download dos arquivos

Abraços.

115 comments

Gilberto 15 de setembro de 2011 at 2:24

Sem dúvida um excelente artigo, de maneira simples e funcional. Parabéns!

Reply ↓
Nathan 20 de setembro de 2011 at 18:11

Já conferi os códigos milhares de vezes e está tudo correto, mas quando clico pra enviar não acontece nada… não sei o que se passa… =(

Reply ↓
Daniel 23 de setembro de 2011 at 18:39

Olá, muito bom o script, eu não estou conseguindo formatar a div #status por que ? Mudar a cor etc, estou atacando a mesma no css mas nada acontece.. por que isso acontece ?

Reply ↓
Daniel 23 de setembro de 2011 at 18:44

Rs, me desculpe, eu não estava formatando ela por uma pequena falta de atenção, sinceras desculpas, novamente agradeço !

Reply ↓
vinicius 23 de setembro de 2011 at 20:00

Parabéns muito bom seu script… funcionando perfeitamente galera!
abração, atée

Reply ↓
Jefferson 7 de outubro de 2011 at 21:32

Rafael estou tendo uma dificuldade de enviar radio e checbox usando seu script …quando envio ele sempre marca “on” na duas opcoes. ex se eu colocar dois checkbox e enviar eloe vai mandar ON ON sendo que so marquei um campo. como resolver?

Reply ↓
Abimael 10 de outubro de 2011 at 10:53

Muito bom…..
Olha, no meu deu um erro de Objeto esperado, o q seria?
Mas fiquei muito contente em ter achado este tutorial.

Reply ↓
Jefferson 11 de outubro de 2011 at 9:17

Existe como ao inves de pegar campo a campo do formulario no post mandarmos o form inteiro? Por que nos casos onde temos formularios grandes teriamos muito trabalho…

Reply ↓
- Rafael Couto 15 de outubro de 2011 at 2:55
  
  Olá Jeffeson,
  
  Sim, um excelente plugin para jquery que já envia os campos automaticamente:
  http://jquery.malsup.com/form/
  
  Eu utilizo ele neste artigo, de uma olhada.
  
  Abraço.
  
  Reply ↓
Elio 12 de outubro de 2011 at 21:27

Cara! Mto massa esse script! Tá funcionando show de bola!
Me tira uma dúvída… se este sistema de msg fosse um chat, como q eu buscaria os dados no BD? Tipo o twitter, ele mostra o retorno do BD mesmo se for outra pessoa postando… Sabe explicar? Vlw Abraço

Reply ↓
- Rafael Couto 15 de outubro de 2011 at 3:01
  
  Olá Elio,
  
  O jeito mais simples de se fazer isso é criar um timer que a cada X segundos busca por mensagens novas no banco de dados. Dê uma pesquisada na função setInterval() do javascript, você pode começar por ai.
  
  Abraço.
  
  Reply ↓
Ana 15 de outubro de 2011 at 15:51

Parabéns, Rafael!

Excelente tutorial!

Funcionou muito bem aqui, porém utilizando o IE! Com o Mozilla não funfou! =]

[]‘s

Reply ↓
Pedro Costa 3 de novembro de 2011 at 10:58

Olá Rafael,

Tenho usado esse código, mas no IE 8 e 9, mas o retorno que deveria ocorrer na linha 22, caso tenha corrido tudo certo, é undefined. Sabe o que pode ser?

Abs.

Reply ↓

Rafael,

Estou desenvolvendo uma aplicação me orientando por este e outros post (php, jquery). O sistema funciona assim, ao clicar no link ele exclui um registro da base de dados, se realizado com sucesso eu altero a classe do link para “OK” ou “ERRO” em caso de erro.

O jquery está assim, porém não está alterando a classe.

$(function($){
    $("ul#nav a").click(function(){
        var atualiza = $(this).attr('href');
        $.post('envia.php', {
            atualiza: atualiza
        },
        function(resposta) {
            if (resposta != false) {
                $(this).addClass("ok");
            }
            else {
                $(this).addClass("erro");
            }
        })
        return false;
    })
});

Quero alterar somente o link que foi clicado. Valeu!

Reply ↓

Olá Fabio,

Creio que o problema seja o escopo do this, como ele está dentro da função está se referênciando a ela.
Acredito que você possa armazenar o objeto e então utilizá-lo posteriormente, por exemplo:

$(function($){
    $("ul#nav a").click(function(){
        var atualiza = $(this).attr('href');
        var obj = $(this);
        $.post('envia.php', {
            atualiza: atualiza
        },
        function(resposta) {
            if (resposta != false) {
                obj.addClass("ok");
            }
            else {
                obj.addClass("erro");
            }
        })
        return false;
    })
});

Abraço.