Formulário simples com ajax – Método serialize()

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']) &amp;&amp; isset($_POST['cidade']) &amp;&amp; $_POST['nome'] != '' &amp;&amp; $_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.

Junte-se a nós e esteja sempre atualizado com as últimas novidades e dicas