Pequenas Dúvidas

  • HTML
  • CSS
  • JS
  • PHP
  • MySQL
  • Marketing Digital
  • Photoshop
Home Enviar dados de um formulário sem atualizar a página com JQUERY (ajax)

Enviar dados de um formulário sem atualizar a página com JQUERY (ajax)

Na postagem de hoje vou mostrar como enviar todos os dados de um formulário para uma página sem atualizar a página utilizando um recurso do JQUERY.

Vamos começar, o primeiro passo é criar um formulário:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Envio de dados por AJAX</title>
</head>

<body>
    <form id="ajax" method="post" action="dados.php">
        <ul>
            <li>
                <label for="nome">Nome</label>
                <input type="text" id="nome" name="nome">
            </li>
            <li>
                <label for="idade">Idade</label>
                <input type="text" id="idade" name="idade">
            </li>
            <li>
                <label for="sexo">Sexo</label>
                <select id="sexo" name="sexo">
                	<option value="masculino">Masculino</option>
                    <option value="feminino">Feminino</option>
                </select>
            </li>
            <li>
            	<label for="observacao">Observação</label>
                <textarea id="observacao" name="observacao" cols="15" rows="5"></textarea>
            </li>
            <li>
            	<input type="submit" id="gravar" value="gravar" />
            </li>
        </ul>
    </form>
</body>
</html>

Vou adicionar um CSS apenas para deixar o formulário mais apresentável:

<style type="text/css">
form,
ul, li {
	float: left;
	width: 500px;
	display: block;
}
label {
	width: 100%;
	display: block;
	color: #333333;
	margin: 5px 0;
}
input[type=text] {
	width: 246px;
	height: 26px;
	padding: 2px;
	border: solid 1px #e4e4e4;
}
select {
	width: 250px;
	height: 30px;
	border: solid 1px #e4e4e4;
}
textarea {
	width: 246px;
	height: 96px;
	resize: none;
	padding: 2px;
	border: solid 1px #e4e4e4;
}
input[type=submit] {
	width: 100px;
	height: 30px;
	display: block;
	border: solid 1px #4095b8;
	background: #51a0c1;
	cursor: pointer;
	color: #FFF;
	text-transform: uppercase;
}
</style>

Agora vamos ao JQUERY, primeiro é necessário que o JQUERY seja carregado dentro da página, existem duas formas de fazer isso.

1 – Adicionar esse link entre as tags <head> e </head>

<script src=”http://code.jquery.com/jquery-1.11.2.min.js”></script>

OBS: Por ser um link externo, podem ocorrer alguns problemas de desempenho.

2 – Baixar o arquivo e colocar de forma “local” junto com os demais arquivos (recomendado) e colocar o link para o arquivo:

<script src”js/jquery-1.11.2.min.js”></script>

Depois iremos fazer a estrutura jquery para realizar o envio de dados, para isso antes de fechar a tag </body> adicionarei o seguinte script:

    <script>
	$('#ajax').submit(function() {
		var form = $(this);
		$.post(form.attr('action'), form.serialize(), function(retorno) {
			alert(retorno);
		});
		return false;
	});
	</script>

Vou criar o arquivo de dados para visualizar se todos os dados foram enviados corretamente:

<?php
$msg = "Dados enviados:\r\n";
foreach($_POST as $campos => $valor) {
	$msg .= $campos.': '.$valor."\r\n";
}
echo $msg;
?>

Agora vamos testar:

formulario_ajaxE foi esse o resultado final.

Caso queira adicionar validações e gravar esses dados no banco, você pode acompanhar as postagens anteriores:

Validando campos de um formulário com a Jquey e a biblioteca validate.

Gravando e validando dados de qualquer formulário PHP no Banco de dados (MySQL).

Dúvidas nos comentários e até a próxima.

 

abr 7, 2015Rodrigo Sarri
Separar as palavras de uma frase em PHPComo recortar qualquer imagem usando a ferramenta caneta do Photoshop
Comentários: 6
  1. Fabrício Batista Rocha
    5 years ago

    Aqui deu errado. A página está sendo direcionada para a página do “action”. Seria possível detalhar o tutorial? Dizendo o que cada linha faz? Estou bem perdido. Desde já agradeço.

    RespostaCancelar
  2. Fabrício Batista Rocha
    5 years ago

    Boa noite,
    Aqui deu errado. A página está sendo direcionada para a página do “action”. Seria possível detalhar o tutorial? Dizendo o que cada linha faz? Estou bem perdido. Desde já agradeço.

    RespostaCancelar
  3. batista
    4 years ago

    este codigo nao funciona, leva para a pagina action,
    coloca um codigo que funcione…

    RespostaCancelar
  4. Vinicius
    4 years ago

    O cara só errou um detalhe
    na linha

    tem que ficar assim ai funciona

    RespostaCancelar
  5. Abner
    3 years ago

    SHOW mano, o menor código possível. show de bola.

    RespostaCancelar
  6. Julio
    2 years ago

    Alguém sabe me informar onde está o erro, aqui não funcionou, creio que seja algo no script.

    RespostaCancelar

Deixe uma resposta Cancelar resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

6 years ago 6 Comentários JQUERY, JSenviar formulario sem atualizar, jquery, php, post without refreh
Posts recentes
  • Como abrir arquivos php no navegador? 21 de dezembro de 2015
  • Utilizando o F12, a ferramenta do desenvolvedor 7 de dezembro de 2015
  • Como recortar qualquer imagem usando a ferramenta caneta do Photoshop 3 de dezembro de 2015
  • Enviar dados de um formulário sem atualizar a página com JQUERY (ajax) 7 de abril de 2015
  • Separar as palavras de uma frase em PHP 9 de fevereiro de 2015
Categorias
  • Adobe Dreamweaver
  • CSS
  • Dicas
  • facebook
  • HTML
  • JQUERY
  • JS
  • Marketing Digital
  • MySQL
  • Photoshop
  • PHP
  • Sem categoria
Nuvem de tags
phpcssjqueryhtmljavascriptcss3inlinematrizlayoutfacebookfan pagedimensõesstyleimagensremover espaço em brancoclassdreamweaveradobetruqesdicaclasseidpáginacadastrar site no googleimplodeadicionar item de segurança banco de dadosvalidar emailarrayrandacertar horahorário de verãofuso horáriogerar número aleatóriovalidar campos phpmysqlsitemapcomo cadastrar site no buscadorcadastrar site no bingcadastrar site no yahoositemap para videossitemap para imagenscadastro no banco de dados phpsitemap para smartphonesitemap para googlecomo construir um sitemap
Outras postagens
PHP pegar ip do usuário
Como pegar o IP do usuário em PHP?
6 years ago
CSS opacidade (transparência) em qualquer navegador, como fazer?
6 years ago
PHP - Trabalhando com funções
Trabalhando com funções
6 years ago
Buscar
2018 © Pequenas Dúvidas - Aprenda um pouco de HTML CSS JS PHP MySQL e Marketing Digital