Inserindo dados no banco em PHP + Ajax + jQuery + Mysql + Validação

Depois de receber alguns pedidos por email finalmente tomei coragem para criar mais este tutorial.

Vamos criar um formulário que enviará dados para um banco de dados Mysql utilizando o Ajax junto com o jQuery e fazendo uma pequena validação na segunda camada (php).

Para começar vamos criar o nosso banco de dados:

CREATE DATABASE `bancodedados`;

CREATE TABLE  `bancodedados`.`contatos` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `nome` varchar(200) NOT NULL default '',
  `email` varchar(200) NOT NULL default '',
  `telefone` varchar(45) NOT NULL default '',
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Beleza, depois do banco de dados criado vamos ao nosso formulário. Criaremos a página ajaxpost.php onde iremos chamar no Head os arquivos java script que vamos necessitar para fazer o post em ajax. Ficando assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Post - Erick Alves</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript" src="js/ajaxpost.js"></script>
</head>

<body>
<form action="#" method="post">
<label>Nome: <input type="text" name="nome" id="nome" /></label>
<label>Email: <input type="text" name="email" id="email" /></label>
<label>Telefone: <input type="text" name="telefone" id="telefone" /></label>
<input type="button" value="Enviar" id="enviar" />
</form>
<div id="resposta"></div>
</body>
</html>
 

Estamos incluindo a biblioteca jQuery, o arquivo ajaxpost.js que vou mostrar a seguir, fiz também o formulário e abaixo criei uma div chamada resposta que será responsável por receber as informaçoes passadas pelo php, podendo ser positiva como "Cadastro realizado com sucesso" ou " Preencha todos os dados".

Vamos ao arquivo que faz toda a mágica, o ajaxpost.js:

$(document).ready(function() {
    $("#enviar").click(function() {
        var nome = $("#nome");
        var nomePost = nome.val();
        var email = $("#email");
        var emailPost = email.val();
        var telefone = $("#telefone");
        var telefonePost = telefone.val();    
        $.post("enviar.php", {nome: nomePost, email: emailPost, telefone: telefonePost},
        function(data){
         $("#resposta").html(data);
         }
         , "html");
    });
});
 

Neste arquivo estamos pegando o valor do campo que possui o id "nome" depois atribuimos o valor para nomePost para que possamos passar para o php pelo $.post.

Fazemos isso para todos os campos e depois passamos tudo para o Enviar.php na linha abaixo:

$.post("enviar.php", {nome: nomePost, email: emailPost, telefone: telefonePost}

Seria o mesmo que a forma tradicional que fazemos só que ajax :D. Ali também dizemos que a div resposta irá receber os dados enviados pelo enviar.php

Vamos ao arquivo enviar.php:

Este não muda exatamente nada, podemos fazer da forma tradicional.

<?php
$nome = $_POST['nome'];
$email = $_POST['email'];
$telefone = $_POST['telefone'];

if (!($nome) || !($email) || !($telefone)){
    print "Preencha todos os campos!"; exit();
}
//Abrindo Conexao com o banco de dados
$conexao = mysql_pconnect("localhost","usuario","senha") or die (mysql_error());
$banco = mysql_select_db("bancodedados");

//Utilizando o  mysql_real_escape_string voce se protege o seu código contra SQL Injection.
$nome = mysql_real_escape_string($nome);
$email = mysql_real_escape_string($email);
$telefone = mysql_real_escape_string($telefone);

$insert = mysql_query("insert into contatos (nome,email,telefone) values ('{$nome}','{$email}','{$telefone}')");
mysql_close($conexao);
if($insert) {
    print "Cadastro Realizado!";
}else {
    print "Erro ao Cadastrar!";
}
?>

No arquivo ajaxpost.js eu passei as variáveis (nome, email e telefone), fiz uma validação para verificar se todos os campos já estão preenchidos. Note que se o teste já fosse feito ai você já conseguiria ver funcionando uma mensagem de "Preencha todos os campos" aparecendo abaixo do formulário caso ele seja submetido sem estar completo.

Logo abaixo eu abri a conexão com o banco, utilizei o mysql_real_escape_string para eliminar a chance de o formulário sofre com o SQL Injection, inseri os dados no banco, fechei o banco e caso tudo esteje correto ele apresenta a mensagem de "Cadastro Realizado" e caso ocorra algum problema "Erro ao Cadastrar";

Se tudo ocorrer bem você irá receber Cadastro Realizado... espero kkkkkkk.

Qualquer dúvida tamo ae galera!

Abraço!

Link para download dos arquivos utilizados:

Arquivos Utilizados

5
Your rating: Nenhum Average: 5 (1 vote)

Comentários

validação usuário

E aí Erick, sou novo na área de programação e gostei muito do seu tutorial. Gostaria de saber como faço para colocar uma validação no nome, exemplo se já a existir o nome ele não deixa cadastrar.

Você vai precisar fazer isto

Você vai precisar fazer isto no php, antes de fazer o insert vc faz um select verificando, se existir o deve dar o echo na mensagem.

Legal o tutorial, mas e se o

Legal o tutorial, mas e se o usuario nao tem ou nao esta com o javascript ativo?

Dúvida-Solicitação

Amigo eu tenho um form de comentários onde... já são exibidos comentários daí quero pra add feito ajax isso conseguir mas.... qro q ao add ele já exiba o comentário como faço? e mais tem como por a img do tipo "enviando ou carregando..."?

Muito bom =]

Parabéns Erick, este foi meu primeiro tutorial de ajax e foi muito fácil entender sua explicação, clara e direta, obrigado pela ajuda para nós iniciantes.

Bacana

Gostei deste script foi bem útil

a unica dificuldade foi que não envia os dados no Chrome.

 

 

Sim

Sim, mas a ideia deste post e mostrar como funciona a parte do ajax para quem tem dúvidas... tem ate uma certa segurança na parte da inclusão no banco de dados

Comentar

O conteúdo deste campo é privado não será exibido ao público.