Envio de formulário sem refresh com JQuery/PHP

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:

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 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

  1. Ola… achei super legal o post. e tenho uma dúvida que esta me castigando…
    Eu tenho um cliente que vai cadastrar os produtos por um form normal e tal, porem ele precisa de tempos em tempos editar os produtos, e ele me pediu que fosse feita uma relacao com todos os produtos abertos para a edicao, e quando clicado em salvar (em cada produto) seria salvo no BD ou EXCLUIDO…
    eu nao achei ainda nenhum artigo que me mostre isso.. uma datagrid que permita a edicao e exclusao do registro sem refresh.. vc sabe de algum artigo? ou sabe me dizer como fazer?
    por favor mande a resposta para meu email …
    obrigadooo

    Reply ↓

  3. Meus Parabéns, cara muito bom mesmo, suas explicações são bem feitas, a organização nem se fala! Espero que você poste mais artigos sobre ajax, mais se for da forma que você vez este, nossa vai ajudar muita gente como me ajudou.

    Reply ↓

  5. Oi, Rafael, mto bom seu tutorial! Eu sou iniciante, mas tentei alterar o código para colocar dois submit no mesmo formulário (enviar e editar). Fiz um switch(action) {
    case ‘enviar’:
    //codigo enviar
    break;
    case ‘editar’:
    //codigo editar
    break;
    }
    Mas depois de novas alterações isso parou de funcionar. Vc conhece alguma solução melhor pra dois submit’s?
    Dentro de cada opção “case” eu posso colocar “$(function($) {
    $(“#formulario”).submit(function(){….” ou este $(function($) só pode ser utilizado uma única fez na página?
    Obrigada pela atenção, Camila.

    Reply ↓

  6. Faael, tudo bem?
    Gostaria de saber se vc pode me ajudar.
    Antes de mais nada, muito obrigado com a contribuição, excelente elaboração!
    Eu estou tentando adaptar o seu código para enviar os dados do formulário via e-mail.
    Na página envia.php aonde ele faz a inserção no bd eu substitui para ele usar a função mail(), quando eu faço o envio ele retorna que houve sucesso porém o e-mail não é enviado.
    Vc poderia me ajudar?

    Att.

    Márcio

    Reply ↓

  7. Rafael,

    Boa noite!
    Seu post é bem antigo, mas se adequa perfeitamente ao que estou desenvolvendo agora. Porém queria fazer uma mudança. Ao invés das mensagens do “status” de validação aparecerem sempre no topo, gostaria que as mesmas fossem exibidas ao lado de cada input respectivo à sua validação. Dá para forncer esta dica? Grande abraço!

    Reply ↓

  8. cara wlw msm eu procurei esse script tava osso bom ai eu fiz umas mudanças e retirei o msql não vejo vantagem de se trabalha com msql da muito trabalho eu usu banco de txt e muito mais simples e tem a mesma eficazia bom wlw msm ok

    Reply ↓

  10. Olá,

    Como eu faria no lugar de enviar as informações para o banco de dados enviar para um ou mais emails que eu queira?
    E também como faria para enviar para um único email que eu deseje e além de enviar cadastrar no banco de dados as informações?

    Obrigado e muito bom seu trabalho!

    Reply ↓

  11. Rodolfo, isso é no CSS.

    Marcos brinner, o banco txt nunca será melhor que mySQL.

    Fael, estou com o mesmo problema do Luiz, no IE8 da este erro no script, e não mostra a mensagem no status quando envia o email, quando algo ta errado ele acusa o erro, mas quando ta tudo certo ele envia mas fica rodando o load do gif e não aparece enviado com sucesso e nem limpa o formulário, já rodei a net atras dessa falha do IE8 e não encontrei, alguém teria alguma solução. ?

    Reply ↓

  12. Primeiramente gostaria de parabenizá-lo pelo código e pelo blogger, sou seu leitor assíduo.
    Estou querendo colocar uma formatação diferenciada para os tipos de mensagens.

    Exemplo:
    ALERT_ERROR
    ALERT_SUCESS

    O código CSS já está OK, sendo que não sei como implementar isso para ficar dinâmico no seu código.

    Segue o parte do código
    // VERIFICA SE O NOME FOI PREENCHIDO
    if (empty($username))
    {
    echo “informe seu username”;
    //ALERT_ERROR

    }
    // VERIFICA SE A MENSAGEM FOI DIGITADA
    elseif (empty($password))
    {
    echo “Escreva sua senha”;
    //ALERT_ERROR

    }
    elseif (pg_num_rows($sql) != 1)
    {
    echo “Login inválido”;
    //ALERT_INFO

    }

    LOCAL ONDE DEVERIA SER DINAMICO

    Obrigado pela ajuda.

    Reply ↓

    • Olá Patrik,

      Você pode imprimir dentro de um span com a classe correspondente, exemplo:

      // VERIFICA SE O NOME FOI PREENCHIDO
if (empty($username))
{
echo "<span class='alert_error'>informe seu username</span>";
}
// VERIFICA SE A MENSAGEM FOI DIGITADA
elseif (empty($password))
{
echo "<span class='alert_error'>Escreva sua senha</span>";
}
elseif (pg_num_rows($sql) != 1)
{
echo "<span class='alert_info'>Login inválido</span>";
}

      Obrigado, abraço.

      Reply ↓

  14. Olá Rafael,
    Em primeiro lugar, parabéns pelo tutorial, excelente! Mas estou com uma dúvida e gostaria da sua ajuda se possível.
    Eu adaptei o script para enviar um email utilizando a função mail() do php, até aí tudo certo, o problema é que eu gostaria de usar esse método em uma outra página que envia um email também, porém com dados diferentes e não estou conseguindo.
    Obrigado!

    Reply ↓

  15. Parabéns Rafa, muito legal é simples e objetivo! Eu fiquei com umas dúvidas também, mas vendo os comentários achei as respostas. A dúvida era: Ao enviar o formulário apresentava um erro de javascript dizendo que func() não estava definido. Com o comentário do João Paulo em 2 de julho de 2010 às 20:26 dizendo para acrescentar um return false ao final do script resolveu. E vendo o seu comentário aprendi para que servia a action com fun(). Obrigado!

    A propósito eu usei seu código para outro fim e gostaria de compartilhar já que vi que alguns tiveram dúvidas quanto a isso. Eu removi as partes do banco de dados e utilizei o código para envio do formulário via e-mail. Para isso eu alterei a parte:

    // Se não houver nenhum erro
    else {

    $bcc = ‘email@email.com’;
    $subject = ‘Assunto’;

    $headers = “MIME-Version: 1.0\n”;
    $headers.= “Content-type: text/html; charset=iso-8859-1\n”;
    $headers.= “From: $email\r\n”;
    $headers.= “Reply-To: $email\r\n”;
    $headers.= “Bcc:”.$bcc.”\n”;

    $emailTo = ‘email@email.com’;
    //$body = ‘Nome: ‘.$nome.’ \n\nEmail: ‘.$email.’ \n\nMensagem:\n ‘.$mensagem;

    mail($emailTo, $subject, $body, $headers);

    echo false;
    }

    Valeu! Mais uma vez obrigado!

    Reply ↓

  16. O grande diferencial que se percebe neste tutorial é que o desenvolvedor demonstra o interesse em ajudar, ensinar. É um tutorial muito bem explicado. Tem mais de 3 meses que estou procurando tutoriais referente a este assunto e não conseguia entender, porque os outros desenvolvedores deixam claro só querem expressar o que sabem, os tutoriais tem começo e fim, sem nenhum conteúdo no meio pra você saber como funciona, o que aconteceu para chegar naquele resultado. Se você aprendeu ou não aí não importa pra eles, “porque o importante é que mostrei que sou demais”. Li outros tutoriais deste blog e percebi que segue o mesmo objetivo(ensinar). Parabéns Rafael, deixo uma frase “O importante não é o quanto eu sei, mas o quanto colaborei e ensinei”. Excelente tutorial.

    Reply ↓

  17. Rafael tem como enviar campos do tipo “file” tbm?
    No formulário que criei funciona todos os outros tipos de campo .. text, radio … apenas o file que não.

    Tem como fazer isso?

    Reply ↓

  18. Cara muito bom mesmo esse seu post, achei por acaso e pensava qeu nao era op qeu eu tava pricurando mas na verdade ja havia desitido de tentar achar por ai
    rsrsrs

    esta de parabens!!!

    Reply ↓

  19. Erro no IE8 : tive o mesmo problema relatado em outros comentarios de que SOMENTE no IE o post nao funciona corretamente, dá um erro de Objeto Esperado e fica carregando e nao pára…

    Descobri que com o jquery postado no exemplo, jquery-1.3.2.js, tudo funciona corretamente, mas no jquery atual (1.6.3) o problema aparece… nao consegui resolver ate agora ….. no FF e Chrome tudo certo

    Reply ↓

  20. Eae Rafael,cara você é meu pastor quando se trata de dinamica web,entro no seu site todo dia e sempre aprendo muito mesmo,estou fazendo um jogo Multiplayer com Php e Javascript como principais linguagens e eu montar um chat baseado em seu Script.

    Só que eu queria um jeito de mostrar o Nickname do cara logado junto a mensagem…

    Ja tentei de n formas e não consegui…Você tem alguma idéia?

    Aqui:

    $(“#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();

    Ao invez de ser email,mensagem,nome,só queria passar a mensagem e dar um jeito de passar o Nickname…

    E depois mostrar o nickname e a mensagem sem precisar dar refresh na página

    // Coloca a mensagem no div de mensagens
    $(“#mensagens”).prepend(““+ nome +” disse: ” + mensagem + ““);

    Brigadão cara!

    Reply ↓

Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">