[jQuery] Formulário Ajax+PHP

shake · 02 de December , 2008, 01:10:52 PM

Então...
Já tem uma cara q tô pra postar esse trem aqui...
Fiquei devendo o rodweb uma melhor solução,
Porém rolou umas paradas esquisita cmg e tô numa zica feia ai fiquei só adiando...!

Bom isso não vem ao caso!

Vamos ao trabalho.

Enviar formulário sem atualizar a página utilizando o framework jQuery é simples:

Primeiro iremos criar o formulário!!!!

Code Select


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Formulário</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function(){ // essa linha serve para dizer que o script só será executado quando o DOM estiver pronto
		$('div#resposta').ajaxStart(function(){ //Quando uma requisição ajax for iniciada executará essa função, que nada mais é colocar aquele status de enviando.... com aquele reloginho e talz
			$(this).html('<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif" /> Enviando...').show();
		})
   
		$('form').bind('submit',function(){ //a função bind(): manipula eventos, no exemplo submit do form

				var f = this; //pega o conteúdo do form
				$.post('enviar.php',{nome:f.nome.value, nome:f.email.value},function(text){ 
					$('div#resposta').text(text); // Exibe mensagem de êxito ou se acontecer algum erro também. Recebe o echo do PHP.

				 });
		
				return false;	
			})
		})
	</script>
</head>
<body id="index">
	<form method="post">
		<label for="nome">Nome: </label><input type="text" name="nome" value="" id="nome">
        <label for="email">Email: </label><input type="text" name="email" value="" id="email">
	<input type="submit" value="Enviar &rarr;">
	</form>	
	<div id="resposta" style="display:none;"></div>
</body>
</html>

Depois precisamos do script que executará o envio do email ou envio dos dados para um banco.
envia.php //No caso enviando um email:

Code Select


<?php
if($_POST){
	$nome = $_POST['nome'];
        $email = $_POST['email'];
	if($nome != '' && $email != ''){
                $corpo = $nome.' <br> '. $email; 
                $cabecalho = "From: ". $nome . " <" . $email . ">\r\n";
                //OBS configurações de email ficam a critério!
		if(mail("email@email.com", "Teste Mensagem", $corpo, $cabecalho)){
                       echo "Email enviado com sucesso!";
                }else
                       echo "Falha no envio do email!";
                }
	}else{
		echo "Preencha corretamente todos os campos!";
	}
}
?>

envia.php //Nesse caso enviaremos os registros para o banco de dados

Code Select


<?php
if($_POST){
	$nome = $_POST['nome'];
        $email = $_POST['email'];
	if($nome != '' && $email != ''){
               $conecta = mysql_connect("$host","$login_db","$senha_db") or die (mysql_error());
               mysql_select_db($database, $conecta) or die (mysql_error());
		if(mysql_query("INSERT INTO tabela (id, nome, email) VALUES (null,'$nome','$email')")){
			echo "Cadastrado!";
		}else{
			echo "Erro!";
		}
	}else{
		echo "Preencha corretamente todos os campos!";
	}
}
?>

Se ficou algo mal explicado postem ai que posso explicar melhor!
Fiz aqui na correria!
Abraços

FORUM DARKERS

[jQuery] Formulário Ajax+PHP

shake