Este método destina-se a coletar os valores entrados pelo usuário em campos de formulário e transformá-los em formato de string. Essa ação também é conhecida como “serializar dados“.
A serialização de dados é feita com o objetivo de estruturar os dados de uma forma apropriada, para serem enviados ao servidor. O formato de serialização é compatível e aceito pela maioria das linguagens de programação no lado do servidor, bem como pelos frameworks.
Para que o método serialize() funcione, é necessário que os campos de entrada dos dados a serem serializados sejam marcados com o atributo name. Você pode usar adicionalmente o atributo id, contudo ele sozinho não é suficiente para a serialização.
Observe uma marcação mínima para a correta serialização:
<input type="text" name="nome" />
O atributo name deve ser único na página e com valor de sua livre escolha.
Cada campo de entrada de dados deve ser marcado com um valor de atributo name exclusivo.
Para demonstrar o uso desse método na prática, desenvolvemos uma página exemplo, contendo dois campos de texto para envio de dados ao servidor. A requisição é feita com o uso da função $.ajax(), para um arquivo PHP de processamento dos dados.
A página HTML da qual se faz a requisição foi denominada [arquivo.php] e o trecho relevante da marcação da página é mostrado a seguir.
...
<h1>Como Desenvover - Exemplo de requisição com uso do método serialize()</h1>
<fieldset>
<legend>Entre com os dados a enviar</legend>
<form action="exemplo-serialize.php" method="post" id="form_um">
<label>Nome: <input type="text" name="nome" /></label>
<label>Cidade: <input type="text" name="cidade" /></label>
<input type="submit" value="Enviar">
</form>
</fieldset>
<div id="mensagem_erro"></div>
<div id="insere_aqui"></div>
...
Considerando um formulário com muitos campos, está técnica elimina a necessidade de armazenar dados, um a um em variáveis, fazendo este processo automáticamente e simplificadamente com o uso do método serialize().
O Script completo que usa o método serialize() para a requisição é mostrado a seguir.
JQuery
<script type="text/javascript">
$(document).ready(function() {
var iconCarregando = $('<span class="destaque">Carregando. Por favor aguarde...</span>');
$('#form_um').submit(function(e) {
e.preventDefault();
var serializeDados = $('#form_um').serialize();
$.ajax({
url: 'exemplo-serialize.php',
dataType: 'html',
type: 'POST',
data: serializeDados,
beforeSend: function() {
$('#insere_aqui').html(iconCarregando);
},
complete: function() {
$(iconCarregando).remove();
},
success: function(data, textStatus) {
$('#insere_aqui').html('<p>' + data + '</p>');
},
error: function(xhr,er) {
$('#mensagem_erro').html('<p class="destaque">Error ' + xhr.status + ' - ' + xhr.statusText + '<br />Tipo de erro: ' + er + '</p>')
}
});
});
})
</script>
O arquivo PHP a ser requisitado para carregamento foi denominado exemplo-serialize.php e é mostrado a seguir.
<?php
if(isset($_POST['nome']) && isset($_POST['cidade']) && $_POST['nome'] != '' && $_POST['cidade'] != '') {
$nome = strip_tags($_POST['nome']);
$cidade = strip_tags($_POST['cidade']);
sleep(2); //apagar
$html = "<h2>Este é o conteúdo requisitado para demonstrar o método <code>serialize()</code></h2>";
$html .= "<p>Os dados enviados foram:</p>";
$html .= "<ul>";
$html .= "<li>Nome: <strong>$nome</strong></li>";
$html .= "<li>Cidade: <strong>$cidade</strong>";
$html .= "</ul>";
echo $html;
} else {
echo "<script type='text/javascript'>alert('Por favor preencha os campos Nome e Cidade')</script>";
}
?>
Trata-se de um código simples que dispensa comentários, contudo note que usamos a função PHP sleep com a finalidade didática de atrasar a requisição e permitir que o ícone de alerta de carregamento fosse visualizado durante dois segundos.