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:
E foi esse o resultado final.
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.
