Conheça também: Onmasters . Ofertas . Divulgue! . Vai.la . Geraboleto . Baixa.la . Assista.la . Joga.la
» Início » Desenvolvimento » Ajax » Enviando um formulário POST com AJAX e PHP -->
 
Avaliação: | Publicado em: 20/07/2007
Enviando um formulário POST com AJAX e PHP
Tiago Hillebrandt trabalha atualmente como desenvolvedor Web e professor. Tem conhecimentos em diversas tecnologias como AJAX, Delphi, C, Firebird/Interbase, MySQL, Access, Javascript, HTML, CSS, Java, Pascal, SQL e PHP. Trabalha também com ferramentas como Corel Draw, Photoshop, Dreamweaver e Flash. Atualmente está cursando Tecnologia em Sistemas de Informação na Universidade do Estado de Santa Catarina (UDESC).


Fala galera, tudo certo? Bom, hoje vamos montar uma simples aplicação de envio de formulário com método POST com AJAX e PHP. As explicações estão detalhadas nos comentários. Se você notar, a parte de códigos HTML não foi explicada, afinal, o objeto do formulário é ensinar a utilizar o AJAX.

script.js

var navegador = navigator.userAgent.toLowerCase(); //Cria e atribui à variável global 'navegador' (em caracteres minúsculos) o nome e a versão do navegador

//Cria uma variável global chamada 'xmlhttp'
var xmlhttp; 

//Função que inicia o objeto XMLHttpRequest

function objetoXML() {

if (navegador.indexOf('msie') != -1) { //Internet Explorer

var controle = (navegador.indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; //Operador ternário que adiciona o objeto padrão do seu navegador (caso for o IE) à variável 'controle'

try {

xmlhttp = new ActiveXObject(controle); //Inicia o objeto no IE

} catch (e) { }

} else { //Firefox, Safari, Mozilla

xmlhttp = new XMLHttpRequest(); //Inicia o objeto no Firefox, Safari, Mozilla

}

}

//Função que envia o formulário

function enviarForm(url, campos, destino) {

//Atribui à variável 'elemento' o elemento que irá receber a página postada
var elemento = document.getElementById(destino); 

//Executa a função objetoXML()
objetoXML(); 

//Se o objeto de 'xmlhttp' não estiver true
if (!xmlhttp) {

//Insere no 'elemento' o texto atribuído
elemento.innerHTML = 'Impossível iniciar o objeto XMLHttpRequest.'; 

return;

} else { 

//Insere no 'elemento' o texto atribuído
elemento.innerHTML = 'Carregando...'; 

}

xmlhttp.onreadystatechange = function () {

//Se a requisição estiver completada
if (xmlhttp.readyState == 4 || xmlhttp.readyState == 0) { 

//Se o status da requisição estiver OK
if (xmlhttp.status == 200) {

//Insere no 'elemento' a página postada
elemento.innerHTML = xmlhttp.responseText; 

} else { 

//Insere no 'elemento' o texto atribuído
elemento.innerHMTL = 'Página não encontrada!'; 

}

}

}

//Abre a página que receberá os campos do formulário
xmlhttp.open('POST', url+'?'+campos, true);

//Envia o formulário com dados da variável 'campos' (passado por parâmetro)
xmlhttp.send(campos); 

}


form.php

<html>

<head>

<title>Enviando formulário POST com PHP e AJAX</title>

<!-- Carrega o arquivo 'script.js' ao iniciar a página! //-->

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

</head>

<body>

<table cellpadding="2" cellspacing="0" width="50%">

//No evento 'onsubmit' (ao enviar), ele seta o valor dos campos na função setarCampos() e depois executa a função enviarForm() da página script.js. Caso o usuário não tenha Javascript instalado/habilitado no navegador, ele envia o formulário via ACTION.

<form action="processar.php" method="post" onsubmit="setarCampos(); enviarForm('processar.php', campos, 'divResultado'); return false;"> 

<tr><td>Nome</td><td><input name="txtNome" id="txtNome" type="text"></td></tr>

<tr><td>Email</td><td><input name="txtEmail" id="txtEmail" type="text"></td></tr>

<tr><td></td><td><input type="submit" value="Enviar">&nbsp;<input type="reset" value="Limpar"></td></tr>

</form>

</table>

<div id="divResultado"/>

<script>

//Cria a função com os campos para envio via parâmetro

function setarCampos() {

campos = "txtNome="+encodeURI(document.getElementById('txtNome').value).
toUpperCase()+"&txtEmail="+encodeURI(document.getElementById('txtEmail').value);

}

</script>

</body>
</htm>

processar.php

<?php

//Determina o tipo da codificação da página
header("content-type: text/html; charset=iso-8859-1"); 

//Extrai os dados do formulário
extract($_POST); 

//Verifica se algum nome foi digitado
$nome = ($txtNome != "") ? $txtNome : "desconhecido"; 

//Verifica se algum email foi digitado
$email = ($txtEmail != "") ? $txtEmail : "desconhecido";

//Retorna com a resposta
echo "Olá <b>".$nome."</b>, seu email é: <a href="mailto:".$email.""><b>".$email."</b></a>"; 

?>

É isso aí galera! Quem quiser, pode baixar o exemplo pronto que está disponível em anexo.

Qualquer dúvida entrem em contato comigo via email:

tiagoscd@yahoo.com.br

Valeu!

Abraço,

Tiago Hillebrandt


Carlos
Cara, muito bom sua matéria, curti pra caramba, eu precisava muito disso, agora eu fiz e deu tudo certo!

Valeu!
Otimo tutorial!!!! estava prescisando!!! abç
Pedro
Show de bola o artigo!!!

Me ajudou pra caramba, valeu =
excelente!!
Muito bom, obrigado pela ajuda !!!!!


www.uchoa.web.br.com
Felipe
excelente! =
Rodrigo
Bastante objetivo, parabéns!
Anderson
show de bola :D
André B.
LoL

muito bom seu tuto......
cara foi fundo !!!
oi, eu baixei o zip com os ficheiros de exemplo e não funcionaram. Não alterei nada. Quando faço o submite o resultado que aparece é: "Olá desconhecido, seu email é: desconhecido" e não devia ser... O que verifico é que o _POST nao contem nada. Será que me pode ajudar? Cumprimentos, Hugo
Mto bom o artigo!!!
Só preciso saber pq não funciona o &amp; na separação das variáveis!

abraços!
Antonio Carlos <acdiasjunior@hotmail.com>
pra ajudar um pouco na recuperação dos dados do formulario:-)

function pegaVariaveis() {
var variaveis = new Array('variavel1','variavel2',...'variavelN') ;
var dados = new String ;
var comprimento = variaveis.length ;
for(i = 0; i < comprimento; i) {
campo = variaveisi ;
dados = campo "=" encodeURI(eval('document.form.' campo '.value')) ;
if(i < (comprimento - 1)) {
dados = "&" ;
}
}
}

Espero ter ajudado!

Quebrei cabeça fazendo esse pequeno ajuste!
Ficou legal o processo porem a pagina processar.php só recebe os dados se colocar _GET com _POST nao funciona... baixei seu arquivo zipado para testar e continua igual... alguma ideia???
Venilton <venilton@ig.com.br>
Tá dando erro na acentuação. Por exemplo, se no campo nome eu escrevo JOSÉ, quando clico no botão "Enviar" aparece JOSé. Já inclui na página form.php a linha "<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">" mas não adiantou nada. Alguém sabe como resolver?
Tiago Hillebrandt <tiagoscd@yahoo.com.br>
Você colocou este código no seu php?

//Determina o tipo da codificação da página
header("content-type: text/html; charset=iso-8859-1");
Diogo
O colega, arruma seu artigo aí... Teu exemplo só dá "Olá desconhecido"...

Não está funcionando!

s