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);

2 comentários em “JQuery: Enviando dados com FormData e $.ajax

  • 27 de junho de 2018 em 11:31
    Permalink

    Com este script ainda há o refresh da pagina ou a pagina é redirecionada para a pagina de ação do servidor no caso a pagina PHP.
    Tem como fazer ser atualizar a página?

    Resposta
    • 28 de junho de 2018 em 6:25
      Permalink

      Fala Marcio.

      A página não é atualizada por causa do return false;

      Para que a página seja atualizada, você pode incluir location.reload().

      success: function( data ) {
         //console.log(data);
         location.reload();
      },
      Resposta

Deixe uma resposta

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