Processar dados do formulario sem refresh usando ajax e php

Para acompanhar este tutorial precisara das seguintes ferramentas (supondo que tenha instalado um servidor php na tua maquina): jquery, um editor html (pode ser notepad do Windows).

Ok, mãos a obra:

Após fazer o download do jquey, crie uma pasta com um nome a sua escolha e deixe la o ficheiro javascript.

Neste tutorial iremos usar um exemplo simples sem base de dados: teremos um formulário HTML com um campo para preencher o nome e abaixo do formulário teremos uma div (com id=”mensagem”) que ira imprimir o texto: meu nome é: <nome-digitado>.

Primeiro vamos criar a pagina HTML com o formulário, iremos dar o nome de teste.html, e adicione entre as tags HEAD o seguinte código:

<script type="text/javascript" language="javascript" src="jquery-1.9.1.js"></script>

<script type="text/javascript" language="javascript">

$(function($) {

                                $("#formulario").submit(function()

                                var nome = $("#nome").val

                                var mensagem = $("#mensagem").val(); // div de resultado

                                                                $.post('print_name.php', {nome: nome }, function(resposta) {

                                                                                if (resposta == false) {

                                                                                $("#mensagem").html(resposta);

                                                                }

                                                                else {

                                                                $("#mensagem").prepend("Meu nome &eacute; :<strong>"+ nome +"</strong>");

                                                $("#nome").val(""); //limpamos o campo nome

                                                                }

                                });

                });

});

</script>

A primeira linha é a chamada a biblioteca jquery, substitua o atributo src pelo ficheiro que baixou.

A seguir temos a funcao que será invocada apos o submit do formulário

$("#formulario").submit(function()

Depois definimos as variáveis nome (que recebe o valor do campo) e mensagem, que recebe o valor da div.

var nome = $("#nome").val(); //definimos a variavel nome e atribuimos o valor do campo nome                              

var mensagem = $("#mensagem").val(); // div de resultado

a seguir invocamos a função post da biblioteca jquery, que recebe como parâmetro o ficheiro php que ira processar os dados do form (print_name.php), a lista de parâmetros (campos) do formulário, a função de resposta responsável por trazer o resultado do ficheiro print_name.php.

a seguir verificamos se o resultado é true(nenhum erro) ou false(ocorreu erro), em caso de erro exibimos o erro na div #mensagem, caso contrario exibimos o texto “Meu nome é <nome digitado>”

e limpamos o campo nome.

Faca o download do projecto completo AQUI

Em caso de duvida deixe seu comentário aqui que irei responder prontamente