Inserindo dados usando AJAX e jQuery

4 12 2008

O jQuery é um framework de Javascript na minha opinião de fácil apreendizado.

Este artigo é composto por um exemplo que aboradará a inserção de dados usando jQuery e AJAX em um formulário simples.

Arquivo exemplo1.js:

/**
$(): utilizado em todas as funções que devem ser referenciadas a jQuery
document: expressão que indica o documento HTML
ready(): associado a leitura do documento enquanto está sendo carregado
*/
$(document).ready(function(){

    // Crio uma variável chamada $forms que pega o valor da tag form
    $forms = $('form');

    // hide(): esconde a div cadastro enquanto carrega o ready()
    $('#cadastro').hide();

    /**
     bind(): é manipulador de evento exemplo submit, click e/ou double click
     a: é a tag <a href>
    */

    $('a').bind('click', function(){
        switch(this.id){
            case 'c':
                $('#cadastro').show(); // show(): mostra div que está oculta (hide()).
                return false;
                break;
        }
    })

    $forms.bind('submit', function(){

        /**
        Crio a variável $button
        attr(): set a propriedade de um atributo, nesse exemplo foi desativado o botão com a tag button
        */
        var $button = $('button',this).attr('disabled',true);

        /**
       Criada a variável params
        serialize(): pega os dados inseridos no formulário
        */
        var params = $(this.elements).serialize();

        var self = this;
        $.ajax({

            // Usando metodo Post
            type: 'POST',

            // this.action pega o script para onde vai ser enviado os dados
             url: this.action,

            // os dados que pegamos com a função serialize()
            data: params,

            // Antes de enviar
            beforeSend: function(){
                // mostro a div loading
                $('#loading').show();

                // html(): equivalente ao innerHTML
                $('#loading').html("Carregando...");
            },
            success: function(txt){
                // Ativo o botão usando a função attr()
                $button.attr('disabled',false);

                // Escrevo a mensagem
                $('#loading').html(txt);

                // Limpo o formulário
                self.reset();
            },

            // Se acontecer algum erro é executada essa função
            error: function(txt){
                $('#loading').html(txt);
            }
        })
        return false;
    });
});

CSS:

body{
    font: 12px tahoma,verdana;
    margin:0;padding:0;
}
#loading{
    display: none;
    text-align: center;
}
a,a:active,a:hover {
    text-decoration:none;
    color:#000;
    outline:none;
}
ul {
    margin-left:5px;
}
li {
    list-style:none;
}
li a {
    float: left;
    display:block;
    background:#f1f1f1;
    width:50px;
    padding:3px;
    text-align:center;
    margin-right:1px;
    border:1px solid #555;
}
li a:hover {
    display:block;
    background:#f0f0f0;
}
#main{
    height: 100%;
    border:none;
}
#top {
    height: 50px;
}
#middle{
    margin-top:5px;
}
fieldset {
    padding:8px;
    border:1px solid #999;
}
button {
    background:#ccc;
    padding:0.5px;
}
.border {
    border: 1px solid black;
}

Arquivo index.php:

<html>
<head>
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="GENERATOR" content="PHPEclipse 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="exemplo1.js"></script>
</head>
<body>
<div id="main">
    <div id="loading"></div>
    <div id="top">
          <ul>
            <li><a href="" id="c">Cadastro</a></li>
          </ul>
    </div> <!-- top -->
    <div id="middle">
          <div id="cadastro">
              <form action="insert.php">
                  <fieldset>
                  <legend>Cadastro usando jQuery</legend>
                  <label>Nome</label><br/>
                  <input type="text" name="nome" size="31" maxlength="30" class="border"/><br />
                  <label>Telefone</label><br/>
                  <input type="text" name="telefone" size="31" maxlength="11" class="border" /><br/>
                  <label>E-mail</label><br/>
                  <input type="text" name="email" size="31" maxlength="100" class="border" /><br/>
                <button>Cadastrar</button>
                </fieldset>
              </form>
          </div> <!-- cadastro -->
    </div> <!-- middle -->
</div> <!-- main -->
</body>
</html>

Arquivo insert.php:

<?php
$nome = strip_tags(trim($_POST['nome']));
$telefone = strip_tags(trim($_POST['telefone']));
$email = strip_tags(trim($_POST['email']));
if(empty($nome) || empty($telefone) || empty($email)){
        echo"Você deve preencher todos os campos!";
        die();
}

$conn = mysql_connect("SERVIDOR", "USUÁRIO", "SENHA");
mysql_select_db("BANCO");

$sql = "INSERT INTO cadastro (nome, telefone, email) VALUES ('".$nome."', '".$telefone."', '".$email."')" or die(mysql_error());
mysql_query($sql);
mysql_close($conn);
echo"Cadastro realizado com sucesso!";
?>

Espero que o exemplo acima ajude e que incentive o uso da jQuery.

About these ads

Ações

Information

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




Seguir

Obtenha todo post novo entregue na sua caixa de entrada.

%d blogueiros gostam disto: