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 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/

Deixe um comentário