Conheça o Plugfeed | » Início » Desenvolvimento » Ajax » Enviando um formulário POST com AJAX e PHP
Conheça o Plugfeed | » 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).
Enviando um formulário POST com AJAX e PHP

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
Olá desconhecido, seu email é: desconhecido
t
t : Não avaliado
Claudio A Silva <claudio_altinf@hotmail.com>
Perfeito hem
vc leu os meus pensamentos
nota 10
Weller Miranda <weller_bm@hotmail.com>
Cara, eu baixei aqui, e deu algum problema..
só aparece isso:
Olá desconhecido, seu email é: desconhecido

como resolvo?
Ai pessoal, para corrigir esse erro que só da "Desconhecido", basta abrir o arquivo processa.php e substituir a linha: extract(_POST); por: extract(_GET);

Assim vai funcionar blz...

Parabéns ao Tiago Hillebrandt, esse foi o melhor script de form em ajax que eu achei...

RobertoPC
Realmente muito bem elaborado, era o que eu procurava. E ainda me mostrou uma função que gostei bastante que não conhecia, a função extract().

Vlw
Com erros.
só não votei excelente, pq a proposta é usar POST e não GET.
Se a proposta fosse para usar o GET, excelente, sería o mínimo pra votar.








Um produto Detetive.net