Enviando dados através do Jquery com ASP
Neste artigo, pretendo apresentar uma maneira de usar um método post de formulário com o uso de Jquery. Com auxílio da função Ajax disponível na base do Jquery, será apresentada uma forma que envia os dados sem a necessidade do recarregamento da página dando ao usuário uma experiência melhor com o sistema.
Para apresentar o recurso, escolhi um modelo de cadastro de Newsletter com banco de dados MySQL, mas é possível utilizá-lo de diversas maneiras seja para cadastros, consultas ou exclusões.
Como havia dito, utilizaremos a biblioteca Jquery que pode ser encontrada no endereço http://jquery.com/. Para este artigo, utilizaremos a versão 1.4.2 min, porém qualquer versão a partir da 1.2 pode ser usada, já que todas contêm em seu núcleo a função Ajax. Salve o arquivo com o nome “jquery-1.4.2.min.js” na mesma pasta que irá salvar as outras páginas.
Agora iremos criar o banco de dados Msql. Abaixo segue a estrutura definida.
DROP DATABASE IF EXISTS `newsletter`;<br />CREATE DATABASE `newsletter`;<br />USE `newsletter`;<br /><br />CREATE TABLE `newsletter` (<br /> `Id` int(11) NOT NULL auto_increment,<br /> `Nome` varchar(255) default NULL,<br /> `Email` varchar(255) default NULL,<br /> PRIMARY KEY (`Id`)<br />) ENGINE=MyISAM DEFAULT CHARSET=latin1;Com a base de dados pronta, iremos criar a página do formulário e posteriormente criaremos a página que recebe os dados e realiza o cadastro.
Página do formulário. Salve com o nome “Form_Newsletter.asp”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>Formulário de Cadastro</title><br /><br /><script type="text/javascript" src="jquery-1.4.2.min.js"></script><br /><br /><script><br /> $(document).ready(function() { $("#button").click(function () {<br /> //Declarando as variaveis<br /> var Nome ="";<br /> var Email =""; <br /> //Recuperando os dados e atribuindo as variaveis<br /> Nome = $("#Nome").val();<br /> Email = $("#Email").val(); <br /> //Inicio da funcao<br /> $.ajax({<br /> //Metodo utilizado<br /> type: "POST",<br /> //Pagina que recebe os daods<br /> url: "Recebe_dados.asp",<br /> //String de dados enviada<br /> data: "Nome="+Nome+"&Email="+Email+"",<br /> //Inicio da funcao que requisita a resposta da pagina onde recebeu os dados<br /> success: function(msg){<br /> alert( "Sucesso! " + msg );<br /> //Limpando os valores dos campos<br /> $("#Nome").val('');<br /> $("#Email").val(''); <br /><br /> }<br /> }); <br /><br /> });<br /> }); <br /></script><br /><br /></head><br /><br /><body><br /><p>Newsletter</p><br /><br /> <table width="280" border="0"><br /> <tr><br /> <td>Nome:</td><br /> <td><input type="text" name="Nome" id="Nome" /></td><br /> </tr><br /> <tr><br /> <td>E-Mail:</td><br /> <td><input type="text" name="Email" id="Email" /></td><br /> </tr><br /> <tr><br /> <td> </td><br /> <td><label><br /> <input type="submit" name="button" id="button" value="Cadastrar" /><br /> </label></td><br /> </tr><br /> </table><br /><br /></body><br /></html>Na página acima, notamos a função “$.ajax” nessa área. É onde aplica o recurso que faz a chamada, transferindo os registros para a página de cadastro.
$.ajax({<br /> //Metodo utilizado<br /> type: "POST",<br /> //Pagina que recebe os daods<br /> url: "Recebe_dados.asp",<br /> //String de dados enviada<br /> data: "Nome="+Nome+"&Email="+Email+"",<br /> //Inicio da funcao que requisita a resposta da pagina onde recebeu os dados<br /> success: function(msg){<br /> alert( "Sucesso! " + msg );<br /> //Limpando os valores dos campos<br /> $("#Nome").val('');<br /> $("#Email").val(''); <br /><br /> }<br /> });Página que realiza a inclusão dos dados enviados pela função acima.
Salve com o nome “Recebe_dados.asp“.
<%<br />'Declarando a variavel de conexao<br />Dim Conexao<br />'Atribuindo o objeto a variavel de conexao<br />Set Conexao = Server.CreateObject("ADODB.Connection")<br />'String de conxao para base de dados Mysql<br />Conexao.ConnectionString = "driver={MySQL ODBC 5.1 Driver};server=localhost;uid=usuario;pwd=senha;database=newsletter"<br />'Abrindo a conexao<br />Conexao.Open<br /><br />'Funcao para tratar as variaveis<br />Function Trata_Request(txt)<br /><br /> entrada = replace(txt,"'","")<br /><br /> Trata_Request=entrada <br /> end Function<br /><br /> 'Recuperando as variaveis enviadas pelo metodo post<br /> Nome = Trata_Request(request.Form("Nome"))<br /> Email = Trata_Request(request.Form("Email"))<br /><br /> 'Instrucao SQL para inserir as variaveis<br /> set cadastra = Conexao.execute("INSERT INTO newsletter(nome,email) VALUES('"&Nome&"','"&Email&"')")<br />%><br /><br />Dados recebido com sucesso!Ao receber os dados a página, mande uma resposta de ok e, com isso, é
apresentada a informação que os dados foram cadastrados com sucesso.
Vimos neste artigo uma maneira de melhorar a usabilidade de um sistema de Newsletter que pode ser aplicado a outros sistemas, focando em uma melhor experiência dos usuários. Com os recursos atuais e com boas práticas, podemos economizar recursos de processamento ao transferir informações entre páginas.
Desenvolvedor de sistemas desde 2004. Atualmente trabalha na Urban Store trabalhou na Agênciadot com projetos de e-commerce e sites de conteúdo com formação técnica em processamento de dados e Bacharel em Ciência da Computação, focado em Ecommerce, ASP, ASP.NET, Java, Javascript, Jquery, Facebook ADS e Google Adwords.
