JQuery: Enviando dados com FormData e $.ajax

Objetos FormData fornecem uma forma fácil de construir um conjunto de pares chave/valor representando campos de formulário e seus valores; tem suporte a campos do tipo file (utilizado em uploads de arquivos).

Sintaxe
var formData = new FormData(form)

Quando form é definido, o objeto FormData é preenchido com as chaves/valores atuais do formulário, usando o atributo name de cada elemento para as chaves e o atributo value para os valores.

Exemplo:

<form id="form" name="form">
  <div>
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome">
  </div>
  <div>
    <label for="email">E-mail:</label>
    <input type="text" id="email" name="email">
  </div>
  <input type="submit" value="ENVIAR">
</form>
<script type="text/javascript">
$(function(){
  $('#form').submit(function(){
    var dados = new FormData(this);
 
    $.ajax({
        url: 'recebe_dados.php',
        type: "POST",
        data: dados,
        processData: false,
        cache: false,
        contentType: false,
        success: function( data ) {
            console.log(data);
        },
        error: function (request, status, error) {
            alert(request.responseText);
        }
    });
    return false;
  });
});
</script>

recebe_dados.php

  print_r($_POST);

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *