
Na postagem de hoje vou mostrar como enviar todos os dados de um formulário para uma página sem atualizar a página utilizando um recurso do JQUERY.
Vamos começar, o primeiro passo é criar um formulário:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Envio de dados por AJAX</title> </head> <body> <form id="ajax" method="post" action="dados.php"> <ul> <li> <label for="nome">Nome</label> <input type="text" id="nome" name="nome"> </li> <li> <label for="idade">Idade</label> <input type="text" id="idade" name="idade"> </li> <li> <label for="sexo">Sexo</label> <select id="sexo" name="sexo"> <option value="masculino">Masculino</option> <option value="feminino">Feminino</option> </select> </li> <li> <label for="observacao">Observação</label> <textarea id="observacao" name="observacao" cols="15" rows="5"></textarea> </li> <li> <input type="submit" id="gravar" value="gravar" /> </li> </ul> </form> </body> </html>
Vou adicionar um CSS apenas para deixar o formulário mais apresentável:
<style type="text/css"> form, ul, li { float: left; width: 500px; display: block; } label { width: 100%; display: block; color: #333333; margin: 5px 0; } input[type=text] { width: 246px; height: 26px; padding: 2px; border: solid 1px #e4e4e4; } select { width: 250px; height: 30px; border: solid 1px #e4e4e4; } textarea { width: 246px; height: 96px; resize: none; padding: 2px; border: solid 1px #e4e4e4; } input[type=submit] { width: 100px; height: 30px; display: block; border: solid 1px #4095b8; background: #51a0c1; cursor: pointer; color: #FFF; text-transform: uppercase; } </style>
Agora vamos ao JQUERY, primeiro é necessário que o JQUERY seja carregado dentro da página, existem duas formas de fazer isso.
1 – Adicionar esse link entre as tags <head> e </head>
<script src=”http://code.jquery.com/jquery-1.11.2.min.js”></script>
OBS: Por ser um link externo, podem ocorrer alguns problemas de desempenho.
2 – Baixar o arquivo e colocar de forma “local” junto com os demais arquivos (recomendado) e colocar o link para o arquivo:
<script src”js/jquery-1.11.2.min.js”></script>
Depois iremos fazer a estrutura jquery para realizar o envio de dados, para isso antes de fechar a tag </body> adicionarei o seguinte script:
<script> $('#ajax').submit(function() { var form = $(this); $.post(form.attr('action'), form.serialize(), function(retorno) { alert(retorno); }); return false; }); </script>
Vou criar o arquivo de dados para visualizar se todos os dados foram enviados corretamente:
<?php $msg = "Dados enviados:\r\n"; foreach($_POST as $campos => $valor) { $msg .= $campos.': '.$valor."\r\n"; } echo $msg; ?>
Agora vamos testar:
Caso queira adicionar validações e gravar esses dados no banco, você pode acompanhar as postagens anteriores:
Validando campos de um formulário com a Jquey e a biblioteca validate.
Gravando e validando dados de qualquer formulário PHP no Banco de dados (MySQL).
Dúvidas nos comentários e até a próxima.