O Desenvolvedor é um blog de www.andafter.org
Chris Benseler
Fotos sempre tiradas do lado direito do rosto. Que nem o Rei!
Viciado em web, trabalho com web. Javascript e (x)html são minha praia conhecida, e me arrisco com PHP e Java.
Na vida offline, futebol e música me distraem. E falar bobeiras com os amigos
Status
Karma: 13102
Opiniões: 30
Mais deste autor
Usando a Prototype - passo 2 - submit de form por ajax
Este texto foi classificado como Muito bomPor Chris Benseler
3 de Setembro de 2008
Segundo post sobre o uso da prototype: como fazer um request em ajax serializando dados de um form
Acompanhe O Desenvolvedor por Feeds!
Uma das coisas básicas em termos de programação para web é fazer um formulário em que você envia os dados para uma página que recebe os mesmos e insere (ou atualiza) uma tabela no banco de dados.
Vou mostrar abaixo como fazer isso de uma forma mais bacana, por ajax (sem precisar dar submit mesmo no form) com a ajuda da prototype (seguindo a série de posts), e totalmente acessíve. (se o usuário estiver num browser com o javascript desabilitado, funcionará corretamente, da forma tradicional).
Como falei, usaremos a prototype. Mais especificamente, o método request() da classe Form. Esse método serializa os dados do formulário e faz o request usando o método request() da classe Ajax da própria prototype, usando a action do form como url.
Obs.: O que é serializar os dados do form? O método percorre todos os elementos de dados de um formulário (inputs, selects, textareas...) e monta uma string no formato [nome do primeiro elemento]=[valor do primeiro elemento]&[nome do segundo elemento]=[valor do segundo elemento]&..&[nome do último elemento]=[valor do último elemento]
Mais sobre a serialização: http://www.prototypejs.org/api/form/serialize
No exemplo abaixo, ao clicar no botão submit do form, a função javascript é chamada. Essa função recebe o próprio form como parâmetro, e já chamo diretamente o método request() que faz o request para edit.php
No retorno da função (chamado de callback) eu verifico o que é retornado por esse edit.php
Nele, eu defini que se der algum erro será jogado o valor -1, e em caso de sucesso, 1 (e, nesse caso, chamo o método reset() que apaga todos os dados preenchidos no formulário, deixando-o pronto para uma nova inserção)
Código funciona html + javascript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemplo Prototype - form</title>
<script src="http://www.prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js"></script>
<script type="text/javascript">
function submitForm(form) {
/*
usa método request() da classe Form da prototype, que serializa os campos
do formulário e submete (por POST como default) para a action especificada no form
*/
form.request({
onComplete: function(transport){
/*
se o retorno for diferente de -1, entende-se que não houve problemas, então apaga-se
os campos do formulário usando o método reset() da classe Form
*/
if(transport.responseText!=-1)
form.reset();
}
});
return false;
}
</script>
</head>
<body>
<h1>Submeter form com prototype</h1>
<form id="edit" name="edit" action="edit.php" onsubmit="submitForm(this); return false;">
<label for="name">nome:</label><input type="text" name="name" id="name" />
<label for="desc">descrição:</label><input type="text" name="desc" id="desc" />
<label for="quant">quantidade:</label><input type="text" name="quant" id="quant" />
<input type="submit" value="salvar" />
</form>
</body>
</html>
Segue abaixo também o código da página edit.php; vale lembrar que independe se é um php ou asp ou qualquer outra coisa. Conforme já comentei nesse post aqui a linguagem usada no server-side não tem impacto algum na implementação javascript - devem ser implementações totalmente desacopladas (até porque uma é server-side, e outra client-side).
<?php
$bdConnection = mysql_connect("localhost", "root", "");
mysql_select_db("exemplos_andafter");
$sql = "INSERT INTO `produtos` (`name`, `desc`, `quant`) VALUES(´" . $_POST["name"] . "´, ´" . $_POST["desc"] . "´, ´" . $_POST["quant"] . "´)";
$result = mysql_query($sql) or die("-1");
echo("1");
?>
Qualquer dúvida, comentem :)
Você também pode gostar...
Comentários
Só uma pergunta, na linha do php:
# $result = mysql_query($sql) or die("-1");
o -1 é inserido no html?
Por exemplo, para eu retornar um erro em ASP teria que exibir -1 no documento e pronto? Pergunto porque não sei se o "or die" printa o que tá escrito ou o que...
Não me mate chris, eu sei que o foco aqui é o javascript! haha :P
[Responder este comentário]
A diretiva die() pára o processo de "compilação" do php (okey, acho que não é compilação, mas sim interpretação) e se tiver algum parâmetro (uma string) passada, printa na tela.
Nesse caso, o retorno do responseText seria mesmo só o -1.
Lembrar que se você tiver ali no .php as tags htmls de abrir e fechar o documento, abrir e fechar body, etc... eles serão printados tb!
[Responder este comentário]
[www]
o objeto não suporta a propriedade
[Responder este comentário]
[www]
Troque o <input type="submit" /> por <a href="#" onclick="submitForm($(`edit`));">salvar</a>
newpp
Se vcs notarem, ao postar algum campo texto com um caractere "&", o post é enviado com os dados quebrados (o que estiver após o "&" vira um novo parâmetro).
Alguém conhece uma solução para isso?
Até mais,
Jean
[Responder este comentário]
antes de executar o "post" (nesse caso o transport, eu acho) você transforma o "&" para algum código (por exemplo `e#38`) e trata os dados quando receber (na edit.php).
Não uso prototype, não sei se existe alguma função para enviar esse tipo de dado e sei que a idéia acima não é o ideal, mas talvez solucione teu problema... :D
Uma boa solução é usar um urlencode nos campos texto abertos. Dá para usar a função escape() ou, ainda - e essa eu uso sempre - ou a encodeURIComponent()
Obrigado!
Até então eu estava com prototype-1.5.1.2. Estou testando a prototype-1.6.0.3 e aparentemente esta versão resolve este problema.
Vou testar melhor e depois posto aqui.
Obrigado pelas sugestões.
Até mais,
Jean
[Responder este comentário]
