|
||
|
|
| Conheça o Plugfeed | » Início » Desenvolvimento » Ajax » Enviando um formulário POST com AJAX e PHP --> |
|
Avaliação:
![]() ![]() ![]() ![]() | Publicado em: 20/07/2007Enviando 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'
//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 //Executa a função objetoXML() //Se o objeto de 'xmlhttp' não estiver true //Insere no 'elemento' o texto atribuído return; } else { //Insere no 'elemento' o texto atribuído } xmlhttp.onreadystatechange = function () { //Se a requisição estiver completada //Se o status da requisição estiver OK //Insere no 'elemento' a página postada } else { //Insere no 'elemento' o texto atribuído } } } //Abre a página que receberá os campos do formulário //Envia o formulário com dados da variável 'campos' (passado por parâmetro) } 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%"> <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"> <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). } </script> </body> processar.php <?php //Determina o tipo da codificação da página //Extrai os dados do formulário //Verifica se algum nome foi digitado //Verifica se algum email foi digitado //Retorna com a resposta ?>
É 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: Valeu! Abraço, Tiago Hillebrandt Arquivos anexos ao artigo
Carlos
Cara, muito bom sua matéria, curti pra caramba, eu precisava muito disso, agora eu fiz e deu tudo certo!
Valeu! ![]() ![]() ![]() ![]() ![]() Adriano <japo_ne_is@hotmail.com>
Otimo tutorial!!!! estava prescisando!!! abç
![]() ![]() ![]() ![]() ![]() Pedro
Show de bola o artigo!!!
Me ajudou pra caramba, valeu = ![]() ![]() ![]() ![]() ![]() Felipe <felipes@yahoo.com.br>
excelente!!
![]() ![]() ![]() ![]() ![]() Gilson <webmaster.gilson@gmail.com>
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...... ![]() ![]() ![]() ![]() ![]() wbinzao <wbinzao@hotmail.com>
cara foi fundo !!!
![]() ![]() ![]() ![]() ![]() Hugo <hugo_bixu@hotmail.com>
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
![]() ![]() ![]() ![]() ![]() Allan <alanrein16@hotmail.com>
Mto bom o artigo!!!
Só preciso saber pq não funciona o & 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! ![]() ![]() ![]() ![]() ![]() TrueConan <lord_korjenioski@yahoo.com.br>
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 ![]() ![]() ![]() ![]() ![]() rafael r.p <rafaelranzolin@gmail.com>
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? ![]() ![]() ![]() ![]() ![]() Marcos Beraldo <marcosberaldounai@yahoo.com.br>
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 ![]() ![]() ![]() ![]() ![]() Thrasher <thrasher@thrasher.com>
Com erros.
![]() ![]() ![]() ![]() ![]() barogana <barogana@netscape.net>
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. ![]() ![]() ![]() ![]() ![]() ![]() |
![]() |
|
|