Gravar dados no banco de dados com Ajax sem refresh ná página

[luannsr12 17]

Olá meus  Jovens, trazendo um tópico aqui pra quem quer criar um formulário para contato quando para cadastro de usuário ou outra coisa sem atualizar a página!

 

 

Primeiramente Vamos criar nosso formulário 

<form id="envia_msg" action="" method="POST">
     <input type="text" name="nome" placeholder="Nome..." required>
     <br />
	 <input type="text" name="email" placeholder="E-mail..." required>
     <br>
	 <textarea name="msg" placeholder="Sua Mensagem..." required></textarea>
	 <br />
     <button type="submit" >Enviar</button>
</form>
<p id="resultado"></p>

Dei o id para o form e deixei a ação em branco  usando o method POST .. Muito importante essas configurações.

Vocês devem ter reparado o paragrafo em baixo do Form, este paragrafo é aonde ira aparecer a mensagem para o usuário caso ocorra tudo certo, e ele também recebeu um id.

 

Agora vamos incluir o Jquery em nossa página, sem ele não funciona, vai por mim!!!

<script type="text/javascript" href="https://code.jquery.com/jquery-3.2.1.min.js" ></script>

Agora vamos pro Javascript, o javascript vai ter a função de enviar os dados e mostrar a mensagem!

$(function(){

	$('#envia_msg').submit(function(event){
		event.preventDefault();
		var formDados = new FormData($(this)[0]);

		$.ajax({
			url:'envia_msg.php',
			type:'POST',
			data:formDados,
			cache:false,
			contentType:false,
			processData:false,
			success:function (data)
     {document.getElementById('resultado').innerHTML = 'Enviado! Em breve Entraremos em contato.';
			  $('#envia_msg').each (function(){
			this.reset();
           });
	  },
			dataType:'html'
		});
		return false;
	});
});

Então apos o formulario que tem o id envia_msg  for submetido ele cria uma função event  que pega os dados do formulario, e passa para o $.ajax enviar os dados para a página envia_msg.php que ainda vamos criar, apos enviado o success entra em ação criando uma niva function, que mostra a mensagem "Enviado! Em breve entraremos em contato."... e Pronto dados enviado sem atualizar a página!

 

--- A Parte "dificil foi feita" -- 

Agora vamos tratar com carinho os dados enviado para a página envia_msg.php

vamos recebe-los e inserir no banco de dados.

isso com , a linguagem mais top de todas!! PHP kkk

<?php 
$host  = "localhost";
$user  = "root";
$senha = "";
$db    = "tabela";

$conn  =  mysqli_connect($host, $user, $senha, $db);

$nome  = $_POST['nome'];
$email = $_POST['email'];
$msg   = $_POST['msg'];

$sql = "INSERT INTO `contato` (`nome`,`email`,`msg`) VALUES ('{$nome}','{$email}','{$msg}')";

$conn->query($sql);
?>

E PRONTO CABOUUU!! VAALLEEUUU

[wootzor 103]

Só um pequeno "reparo". Se estás a usar jQuery, porque não substituir 

document.getElementById('resultado').innerHTML = '...'

por

$('#resultado').html('...');

 

[luannsr12 17]

Em 03/07/2017 at 08:17, wootzor disse:

Só um pequeno "reparo". Se estás a usar jQuery, porque não substituir 

document.getElementById('resultado').innerHTML = '...'

por

$('#resultado').html('...');

 

Boa Ideia :)

[Dr. Programador 0]

Explicação muito confusa.

Pegou o código pronto de algum lugar e não organizou!

 

[marciosena2 0]

E quando o php esta na mesma pagina?

[luannsr12 17]

Em 02/11/2018 at 15:56, Dr. Programador disse:

Explicação muito confusa.

Pegou o código pronto de algum lugar e não organizou!

 

Pelo contrário, eu fiz o código, mas peço desculpas, se não consegui explicar corretamente

[Omar~ 87]

Dentre essas e outras eu criei essa aplicação que usa Javascript nativo e CSS

https://github.com/Spell-Master/sm-web/tree/master/scripts/AjaxRequest

<form id="envia_msg" onsubmit="return ajax.form('envia_msg', 'resultado', 'envia_msg.php')">
     <input type="text" name="nome" placeholder="Nome..." required>
     <br />
	 <input type="text" name="email" placeholder="E-mail..." required>
     <br>
	 <textarea name="msg" placeholder="Sua Mensagem..." required></textarea>
	 <br />
     <button type="submit" >Enviar</button>
</form>
<p id="resultado"></p>

<script>
  var ajax = new AjaxRequest();
  /*
  Metodo: form(form, div, file)
  form('ID do formulário', 'ID do elemento que mostra o resultado', 'arquivo que será enviado os dados')
  */
</script>

Enfim, bem melhor que usar jquery.....