Coluna Dreamweaver – Envio de formulário com ajax

Introdução

Salve Pessoal! Tinha prometido que o próximo artigo seria uma galeria de fotos utilizando varios funções do Spry, mais vai ter quer ficar para a próxima, pois achei esse artigo mais importante pois permiter enviar formulário com ajax e é super facíl de utiliza. Veja os exemplo e como funciona clicando aqui

Pré-requisito

Dreamweaver CS3, para baixar a versão trial clique aqui
Arquivo js do Spry.Utils.submitForm
Arquivo js do SpryData (opcional)

Conceitos

Com Framework Spry é possível enviar um formulário sem a necessidade de atualizar a página atual. Isso é possível utilizando a função Spry.Utils.submitForm que necessita apenas da inclusão do arquivo JS e o adicionamento de um comportamento para a chamada da função. O comportamento responsável pela chamada pode ser adicionado no próprio formulário ou utilizado outros elementos HTML.
Com a função Spry.Utils.submitForm é possível realizar cadastro em banco de dados, fazer a requisição dos dados e ainda visualizar o resultado do formulário na própria página sem a necessidade de ser atualizada.
O Spry.Utils.submitForm têm três parâmetros de configuração: identificação do formulário, função a ser executada depois do envio e a terceira para opções especiais. Suporta os métodos POST e GET. Formulários que têm enctype=”multipart/form-data” são submetidos usando default do comportamento do browser. Suporta PHP, ASP e Coldfusion

Conteúdo

Para enviar o formulário faça a inclusão do arquivo SpryUtils.js dentro da TAG Head.

<script src=”/SpryUtils.js”type=”text/javascript”></script>

E depois adicione a chamada da função e pronto.

Spry.Utils.submitForm(‘identificacao_do_formulario’, funcao_executada_final, {method:’get’, url:’pagina.php’});

Veja como ficaria se a chamada fosse adicionada dentro do formulário no evento onClick

<input name=”teste” value=”Enviar” onclick=”Spry.Utils.submitForm(‘form’, updateResponseDiv2, {method:’post’, url:’pagina.php’});” type=”button”>

Veja como ficaria se a chamada fosse adicionada em um link de texto

<a onclick=”Spry.Utils.submitForm(‘form1′, updateResponseDiv, {method:’post’, url:’enviar.php’}); “>Enviar Formulário </a>

Carregar os dados dos formulários na propria página
Para que os dados do formulário sejam carregados dentro da própria pagina, igual ao exemplo vamos criar uma função que será executa após o envio, essa função vai atualizar o conteúdo da DIV (response_form1) com o conteúdo da página (pagina.php) que recebeu os dados do formulário.
A função updateResponseDiv utiliza o Spry.Utils.setInnerHTMLé responsável pelo retorno do dados na própria página sem a necessidade de atualização. Para utilizá-la e necessário incluir o arquivo SpryData.js dentro da tag HEAD

<script src=”.. /SpryData.js” type=”text/javascript”></script>

E depois chamar a função Spry.Utils.setInnerHTML passando dois parametros: a DIV que será atualizada e a função utilizada

<script type=”text/javascript”> function updateResponseDiv(req) { Spry.Utils.setInnerHTML(‘response_form1′, req.xhRequest.responseText); } </script>

Agora vamos chamar a função Spry.Utils.submitForm:

<form name=”form1″ method=”post” action=”pagina.php” onsubmit=”return Spry.Utils.submitForm(this, updateResponseDiv);”>

A chamada da função foi adicionada no onSubmit que realizara o envio do próprio formulário e retornará na própria página os dados que foram submetidos. Para isso foi declarado dois parâmetros, a identificação do formulário que é o próprio (this) e a função updateResponseDiv
Caso você queira somente enviar determinados campos do formulário a chamada deve ser:

Spry.Utils.submitForm(‘identificacao_do_formulario’ funcao_executada_final, {elements: ['id_do_campo1', 'id_do_campo2']});

Para enviar o formulário com variáveis terceiro parâmetro deve ser adicionado a string ‘additionalData’ informando as variaveis ‘variavel=valor’ assim:

Spry.Utils.submitForm(‘identificacao_do_formulario’ , funcao_executada_final, {url:’pagina.php’, additionalData:’ajaxSubmit=true&from=samples’

Considerações Finais

Qualquer comentário que vocês deixarem será bem vindo. Deixem seus pedidos de tutorias para as próximas colunas clicando aqui
Autor: Marcelo Souza Ramos – Colunista Dreamweaver do Portal MXSTUDIO
Visite meu blog www.marceloramos.blog.br e qualquer dúvida envie um e-mail para marcelo@marceoramos.blog.br ou acesse o nosso fórum