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 contem 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 Mysql. Abaixo segue a estrutura definida.
DROP DATABASE IF EXISTS `newsletter`;
CREATE DATABASE `newsletter`;
USE `newsletter`;
CREATE TABLE `newsletter` (
`Id` int(11) NOT NULL auto_increment,
`Nome` varchar(255) default NULL,
`Email` varchar(255) default NULL,
PRIMARY KEY (`Id`)
) 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulário de Cadastro</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() { $("#button").click(function () {
//Declarando as variaveis
var Nome ="";
var Email ="";
//Recuperando os dados e atribuindo as variaveis
Nome = $("#Nome").val();
Email = $("#Email").val();
//Inicio da funcao
$.ajax({
//Metodo utilizado
type: "POST",
//Pagina que recebe os daods
url: "Recebe_dados.asp",
//String de dados enviada
data: "Nome="+Nome+"&Email="+Email+"",
//Inicio da funcao que requisita a resposta da pagina onde recebeu os dados
success: function(msg){
alert( "Sucesso! " + msg );
//Limpando os valores dos campos
$("#Nome").val('');
$("#Email").val('');
}
});
});
});
</script>
</head>
<body>
<p>Newsletter</p>
<table width="280" border="0">
<tr>
<td>Nome:</td>
<td><input type="text" name="Nome" id="Nome" /></td>
</tr>
<tr>
<td>E-Mail:</td>
<td><input type="text" name="Email" id="Email" /></td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="submit" name="button" id="button" value="Cadastrar" />
</label></td>
</tr>
</table>
</body>
</html>
Na página acima, notamos a função “$.ajax” nessa área. Onde será aplicado o recurso que faz a chamada, transferindo os registros para a página de cadastro.
$.ajax({
//Metodo utilizado
type: "POST",
//Pagina que recebe os daods
url: "Recebe_dados.asp",
//String de dados enviada
data: "Nome="+Nome+"&Email="+Email+"",
//Inicio da funcao que requisita a resposta da pagina onde recebeu os dados
success: function(msg){
alert( "Sucesso! " + msg );
//Limpando os valores dos campos
$("#Nome").val('');
$("#Email").val('');
}
});
Página que realiza a inclusão dos dados enviados pela função acima. Salve com o nome “Recebe_dados.asp”
<%
'Declarando a variavel de conexao
Dim Conexao
'Atribuindo o objeto a variavel de conexao
Set Conexao = Server.CreateObject("ADODB.Connection")
'String de conxao para base de dados Mysql
Conexao.ConnectionString = "driver={MySQL ODBC 5.1 Driver};server=localhost;uid=usuario;pwd=senha;database=newsletter"
'Abrindo a conexao
Conexao.Open
'Funcao para tratar as variaveis
Function Trata_Request(txt)
entrada = replace(txt,"'","")
Trata_Request=entrada
end Function
'Recuperando as variaveis enviadas pelo metodo post
Nome = Trata_Request(request.Form("Nome"))
Email = Trata_Request(request.Form("Email"))
'Instrucao SQL para inserir as variaveis
set cadastra = Conexao.execute("INSERT INTO newsletter(nome,email) VALUES('"&Nome&"','"&Email&"')")
%>
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.
Veja mais no Imasters
http://imasters.uol.com.br/artigo/18163/asp/enviando_dados_atraves_do_jquery_com_asp/
