Envio de formulário com ajax

[joaowebdesigner 0]

Olá,

 

Depois de muito tempo sem postar, volto ao fórum do imasters para pedir um auxílio de vcs. Seguinte: estou fazendo um site de uma página só (cada seção é uma âncora com scroll, aquele esquema que todo mundo já tá manjado) e a última seção é a de fale conosco. Como se trata de uma página só e em nenhum momento haverá refresh na página, eu quero manter esse padrão e fazer o envio do form (de contato e newsletter) por meio do ajax.

 

O que eu preciso exatamente: ao clicar no botão de envio, esse botão deve sumir e aparecer uma mensagem de loading, ex "enviando mensagem, aguarde..." e, assim que o envio for concluído, o formulário deve ficar com display none e aparecer a mensagem de ok do envio, um h2 por ex. Logicamente, após o envio, aquele loading do botão deve sumir também.

 

É muito complexo fazer isso? Sei que tem 2 funções, $.post e $.ajax mas não sei a diferença entre elas. Poderiam me dar um exemplo desse envio? Minha dúvida é só com o javascript mesmo, o php já tá pronto. A dúvida principal é fazer o efeito do loading no botão, encerrar esse loading e mostrar uma div no lugar do form com a mensagem de sucesso. Em caso de erro no envio, eu quero que o formulário continue aparecendo e mostrar só um box adicional notificando que houve erro.

 

quem puder dar um help agradeço!!

[LeoO_DF 22]

Um Exemplo rápido de formulário com ajax:

    <div id="Formulario">
        <form name="Exemplo" method="post">
            <input name="Campo" id="Campo" type="text" placeholder="Campo :P" />
            <input type="submit" value="Enviar" />
        </form>
    </div>
    <div id="Retorno"></div>

$(function(){
	$("form").submit(function(event)
	{
		event.preventDefault(); //Cancela o refresh do submit
		var Campo_Value = $("input#Campo").val(); //Pega o valor da Input
		if(Campo_Value != "" && Campo_Value != null) //Verifica se o campo foi preenchido
		{
			$("div#Retorno").html("Enviando mensagem, Aguarde...");
			$.post("Pagina_do_Post.php", { Campo: Campo_Value }, function(retorno){ $("div#Retorno").html(retorno); $("div#Formulario").fadeOut("fast"); }).fail(function(){$("div#Formulario").fadeIn("fast"); $("div#Retorno").html("Desculpe ocorreu um erro ao enviar o formulário"); });//Faz a Postagem do formulário, coloca o retorno dele na div de retorno e esconde o formulário
			return 1;
		}
		else
		{
			$("div#Retorno").html("Você não Preencheu o Campo!");
			$("input#Campo").focus(); //Da focu na input se ela não for digitada
			return 1;
		}
	});
});

na Pagina_do_Post.php:

<?php
$Campo = $_POST['Campo'];
if(isset($Campo)):
	//Função de enviar o formulário
	echo 'Formulário enviado!';
endif;
?>

 

Exemplo simples de postagem, ele posta pega o retorno do post e poe em uma div e esconde o formulário se der erro ele volta o formulário e avisa que ocorreu um erro, enfim não testei mais acho que esteja tudo correto.