Help
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
CÓDIGO
$(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("<li>" + nome_post + " : " + email_post + "</li>").next().fadeIn("slow");
});
// Apaga os Dados do Campo Nome e E-Mail
$('#Nome').val("");
$('#EMail').val("");
return false;
});
});
$('#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("<li>" + nome_post + " : " + email_post + "</li>").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:
CÓDIGO
<%@ 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("");
}
%>
<%
// 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
