Submetendo 02 forms… Parte 2

fevereiro 5, 2007 às 10:01 pm | Publicado em Java, JavaScript | 1 Comentário

Na primeira parte do post vimos como criar a queryString com os dados dos dois formulários. Agora iremos submeter esta query para o servidor através de uma requisição POST com AJAX.

Vamos adicionar agora o código AJAX que irá submeter o formulário.

—————-

function submeterForm(){
var query = recuperarQuery();

var xmlHttp = getXMLRequest();
xmlHttp.open(‘POST’, ‘ServletForm’, true);
xmlHttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlHttp.setRequestHeader(“Content-length”, query.length);

xmlHttp.onreadystatechange = function(){
//função para tratar a resposta do servidor
}

xmlHttp.send(query);
}

function recuperarQuery(){
var query = ”;
query += ‘input1=’ + document.form1.input1.value;
query += ‘&input2=’ + document.form2.input2.value;
return query;
}

————————–

A função recuperarQuery() não sofreu alterações. A grande mudança está na função submeterForm().

Primeiro recuperamos a queryString com os dados que queremos submeter. Em seguida recuperamos um objeto XmlHttpRequest, responsável por fazer a requisição assíncrona (AJAX). Definimos que o tipo de requisição será POST o que torna necessário alterarmos dois cabeçalhos da requisição, o Content-type e o Content-length. O primeiro informa que o conteúdo da requisição são dados de um formulário e o segundo o tamanho do conteúdo. Informamos também a url ServletForm, que é um servlet configurado no servidor.

A propriedade onreadystatechange armazena a função que “atenderá” aos eventos da requisição ajax. Neste exemplo simplesmente não implementamos nenhuma lógica de retorno porque não é nosso intuito.

Por fim, enviamos os dados para o servidor chamando ‘send(parametros)’.

Simples não???

No servidor é só recuperar os dados da requisição e executar sua lógica de negócio.

—————–

public class ServletForm extends HttpServlet {

@Override
protected void doPost(HttpServletRequest pReq, HttpServletResponse pRes) throws ServletException, IOException {

String parametroForm1 = pReq.getParameter(“input1”);
String parametroForm2 = pReq.getParameter(“input2”);

getServletContext().log(“Parâmetro do form 1: ” + parametroForm1);
getServletContext().log(“Parâmetro do form 2: ” + parametroForm2);

// mais lógica
}
}

——————-

O código acima é simples, recupera os dois parâmetros e imprime no log do servidor.

Bem pessoal… espero que tenham gostado do primeiro tutorial. Seu comentário será muito bem vindo e sugestões de melhoras mais ainda. Gostaria também de ouvir opiniões para próximos artigos e tutoriais.

Abraços…

Marcelo Madeira

Anúncios

1 Comentário »

RSS feed for comments on this post. TrackBack URI

  1. Thank you for this beautiful and very simply put tutorial. I am querying about this subject for a long time, and finally I came up with this link by Google. It helped a lot, even though my Portuguese is VERY bad…

    Muito obrigada 🙂

    Michal


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Crie um website ou blog gratuito no WordPress.com.
Entries e comentários feeds.

%d blogueiros gostam disto: