Criei um artigo que cadastra dados usando o “AJAX puro”. Neste usarei o jQuery para inserir dados no banco.

Usar o jQuery é uma forma mais fácil de criar funcionalidades extras em seus sistemas, de animações básicas a grandes galerias de fotos, mas vamos para o nosso foco que é inserir no banco.

Criei um arquivo chamado funcao_jquery.js para colocar a função de efeito do jQuery. Para nossa aplicação usei o efeito fadeIn().

O Fade in (a função fadeIn()) serve para dar opacidade, e pode ser ajustado para ter animação. Existem três strings de velocidade predefinidas (“slow”, “def”, e “fast”), usei a slow em nossa aplicação;

fadeIn("slow");

Criei dois campos de exemplo (Nome e E-Mail) e um botão “submit“. Podem ser criados quantos necessários:

<form action="Cadastro_JQuery.asp?Cadastrar=Ok" method="post">
    Nome: <input name="Nome" type="text" id="Nome" />
    <br>
    E-Mail: <input name="EMail" type="text" id="EMail" />
    <input name="btAdd" type="submit" value="Adicionar" id="btn_enviar" />
</form>

No action do formulário coloquei uma Query “Cadastrar” com valor ok para ativar a ação do ASP (usando JScript) que segue abaixo:

<%
// Função para cadastrar no banco
if (Request.QueryString("Cadastrar") == "Ok") {

    var nome = Request.Form("Nome");
    var email = Request.Form("EMail");

    Conexao.Execute("Insert Into Newsletter (Nome, EMail) Values ('"+nome+"', '"+email+"')");
    Response.Write("");
}
%>

Usando listas (UL>LI) eu pego as informações do banco e organizo tudo para ser mostrado ao usuário:

<% 
var rs = Conexao.Execute("Select * From Teste"); // SQL para listar os dados
if (rs == null) {
    Response.Write("NADA ENCONTRADO");
}
else {
    while (!rs.EOF) {
        Response.Write("<li>"+rs("Nome")+" : "+rs("EMail")+"</li>") // Lista todos os cadastrados do banco
    rs.MoveNext();
    }
}
%>

No ASP, com JScript para verificar se existe algo no banco, eu pego o RecordSet e comparo ele com “null” e o “else” caso encontre;

if (rs == null) {

… continua o resto do código…

A mesma idéia temos para o “loop”, só que uso o End Of File (.EOF)

while (!rs.EOF) {

… continua o resto do código …

Em seqüência imprimo na tela o que foi encontrado.

O jQuery vai agir da seguinte maneira:

No botão de tipo “submit” coloquei uma ID de nome “btn_enviar”, quando o botão for clicado será enviado os parâmetros via POST para o jQuery.

$('#btn_enviar').click(function(){

    var nome_post = $('#Nome').val();
    var email_post = $('#EMail').val();
   
$.post("Cadastro_JQuery.asp?Cadastrar=Ok",{nome: nome_post, email: email_post}

Logo em seguida jogo dentro da lista (UL>LI).

$("ul li:last").after("<li>" + nome_post + " : " + email_post + "</li>").next().fadeIn("slow"); 
});

E finalizo limpando os campos. Veja na imagem abaixo:

Segue o link da página com o código completo e o arquivo jQuery!

Código completo

Arquivo jQuery

Até o próximo artigo!