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); |
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?
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().
Olá Márcio, você pode usar no ajax o async: true, dessa forma ele manda em segundo plano. Ficaria assim:
$.ajax({
url: ‘./pagina.php’,
type: ‘POST’,
async: true,
data: dados,
processData: false,
cache: false,
contentType: false,
Isso resolveria teu problema.