Tutorial ensinando a criar um formulário de cadastro com Ajax
Para quem não sabe o que é jQuery e nem Ajax vou dar uma breve explicação.
jQuery é uma biblioteca javascript, ou seja, um conjunto de com a intenção de facilitar a vida na hora de programar sites. Existem outras bibliotecas Javascript como a Prototype, Deliciuos, Mootools entre outras mas com a jQuery se destaca entre elas por ser mais simples de utilizar (simples não é ter menos recursos, ok?) e pelo seu tamanho muito, mas muito pequeno mesmo, com cerca de 19KB na sua versão comprimida.
Já o Ajax, não é um biblioteca Javascript e também não é muito correto falar que ele é um objeto Javascript. Ajax é uma forma de fazer sites interativos que não precisem recarregar a página para buscar uma única informação no servidor.
Veja um exemplo, se temos um formulário para cadastro e nele precisamos saber se o nome de usuário inserido pelo visitante já não existe em nosso banco de dados, normalmente teríamos que enviar para o servidor o formulário inteiro, um script no lado do servidor verificaria se o nome de usuário esta disponível ou não e retorna uma página inteira novamente. Mas tudo isso se agente só precisava de uma informação só? É aqui que entra a jQuery e o Ajax , com a jQuery vamos enviar só a informação que queremos e receberemos só a resposta sim ou não do servidor, indicando se o nome de usuário ta disponível ou não.
Vamos lá então!
Comecemos entendendo como o Ajax funciona. A base do Ajax é trocar informações com o servidor usando o objeto XmlHttpRequest sem que seja recarregada a pa?ina inteira. Com o Ajax ele simplificara o uso do objeto. Vamos criar uma página html com um formulário simples de cadastro contendendo os campos de nome, email, login e senha:
HTML |copy code |?
01 02 03 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />04 <title>Cadastro de Usuários</title>05 06 07 <link rel="stylesheet" href="css.css" type="text/css" media="screen" />08 <script src="jquery.js" type="text/javascript"></script>09 <script src="app.js" type="text/javascript"></script>10 11 12
A estilização do formulário pode ser feita como CSS, que não vou explicar aqui para o artigo não ficar muito grande, mas quem se interessar tem um artigo no meu blog explicando o css. Não se esqueça de inserir um link para a biblioteca jQuery e um para o nosso Javascript, chamado de app.js.\r\n
Repare que em action eu coloquei o endereço da pa?ina que processara os dados, por que caso o usuário não tenha javascript ele também fará o cadastro(se é que isso ainda existe, alguém com javascript desabilitado). Veja também que criei um elemento small com id resultado que receberá as informações do servidor(as menssagens de erro).
Com o formulário pronto, o que temos que fazer é a parte do servidor, que manipulara os dados, para criei um script em php que verifica se o usuário inseriu corretamente todos os dados, vamos usa ele, não esqueça de salvar como novo_usuario.php no ser servidor, junto com os outros arquivos criados até agora. O nosso cadastro também depende de um banco de dados, tem um arquivo sql no final do artigo, é só importa-lo para o seu banco de dados usando o phpmyadmin.
Agora que temos a pa?ina e nosso script para processar os dados no lado do servidor tudo já deve estar funcionando sem o Ajax. Só falta a um simples Javascript para enviar os dados e manipular a resposta do servidor(simples graça a jQuery).
Vamos criar o app.js e ver cada função dele:
A primeira linha é uma função da jQuery que é executada quando toda a estrutura da página é carregada, ou seja, tudo será feito se a página tiver sido carregada.
A segunda linha é a função a ser executada quando o visitante enviar os formulário
A terceira linha é nossa função que envia os dados ao servidor, o $.post, ela recebe basicamente 3 parametros, o primeiro a página para onde os dados serão enviados, o segundo os dados que a pa?ina vai receber(repare que foi enviado como se estivessem em uma url) e o terceiro a funçãoo que tratara a respota da pa?ina.
A quarta linha recebe a resposta da página e coloca dentro do elemento html que tenha id igual a resultado.
A função return false é só para assegurar que o formulário não será enviado novamente, já que os dados dele são foram enviados por que enviar denovo pelo metódo normal?
Se tudo foi feito corretamente você pode testar seu formulário usando Ajax agora.
ARTIGOS RELACIONADOS:
fonte e créditos:
http://www.pixelcomcafe.com
/2010/03/
tutorial-ensinando-a-criar-um-formulario-de-cadastro-com-ajax/
-->
Postagens
