Usando jQuery para cadastrar dados
A linguagem em si para fazer o cadastramento no banco não é o foco no momento, usei ASP com JScript para isso e usei o jQuery com efeito .fadeIn(”slow”); para isso então vamos lá:
Criei um arquivo chamado funcao_jquery.js para colocar a função de efeito do jQuery:
O Script completo e comentado para ter uma idéia de como funciona:
funcao_jquery.js
————————–
$(document).ready(function(){
$(‘#btn_enviar’).click(function(){
// Pega valor dos campos Nome e E-Mail
var nome_post = $(‘#Nome’).val();
var email_post = $(‘#EMail’).val();
// Envia para a função criada em ASP
$.post(“Cadastro_JQuery.asp?Cadastrar=Ok”,{nome: nome_post, email: email_post},function(){
// Lista dentro de uma UL>LI os dados postados
$(“ul li:last”).after(”
“).next().fadeIn(“slow”);
});
// Apaga os Dados do Campo Nome e E-Mail
$(‘#Nome’).val(“”);
$(‘#EMail’).val(“”);
return false;
});
});
————————–
Na tela inicial temos esse modelo aqui com campo de Nome e E-Mail só para exemplo:
Quando você cadastra ele gera uma LI dinamicamente sem refresh e com efeito fade:
Segue o código completo:
————————–
<%@ Language=”JavaScript” %>
<%
// Conexao com o Banco de Dados
var Conexao = Server.CreateObject(“Adodb.Connection”);
Conexao.ConnectionString = “Driver=MySQL ODBC 3.51 Driver; DataBase=paineldevendas13; Server=localhost; Uid=root; PassWord=root;”;
Conexao.Open;
%>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>JQuery Cadastrando com ASP</title>
<script language=”javascript” src=”jquery.js”></script>
<script language=”javascript” src=”funcao_jquery.js”></script>
</head>
<body>
<h2>JQuery Cadastrando com ASP</h2>
<ul>
<%
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();
}
}
%>
</ul>
<br><strong>INSIRA DADOS NO BANCO</strong><br>
<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>
</body>
</html>
<%
// Função para cadastrar no banco
if (Request.QueryString(“Cadastrar”) == “Ok”) {
Conexao.Execute(“Insert Into Teste (Nome, EMail) Values (‘”+Request.Form(“Nome”)+”‘, ‘”+Request.Form(“EMail”)+”‘)”);
Response.Write(“”);
}
%>
————————–
Baixar : jquery-1.2.6.js
Escrito por Ted k'
on fevereiro 26, 2009. Arquivado em ASP.net, Javascript.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
olá, boa tarde.
gostei do tutorial e dar uma sugestão. Vocês poderiam criar um link especificamente para Jquery e sua interação com Javascript, tenho muito interesse em aprender mais sobre essas suas ferramentas de programação.
abraços