Gravar dados no banco de dados com Ajax sem refresh ná página
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!! VAALLEEUUUDiscussão (6)
Carregando comentários...