Enviando dados via Ajax e jQuery GET e POST

Uma aplicação web, está atrelada a diversas tecnologias, que são utilizadas em conjunto para se alcançar um nível de interação com os seus possíveis usuários. Tamanha interação, começa a partir de um bom layout, bem pensado, desenhado e que atenda às necessidades de uso, e proporcione ao usuário, uma experiência única na aplicação.

Grandes exemplos de tais tecnologias, que podem proporcionar a conquista desta meta em nossas aplicações, são as folhas de estilos, que darão a “cara” da nossa aplicação, e tecnologias client-server, como JavaScript, capaz de manipular elementos DOM na página. DOM representa como as marcações em HTML, XHTML e XML são organizadas e lidas pelo navegador que você usa, assim, manipular tais marcações, já se torna um ponto positivo em sua aplicação.

Não quero estender mais o assunto em volta do DOM, mas achei interessante salientá-lo, para que possamos formar, cada dia mais, uma consciência de uma web que foque mais na necessidade de alcançar essa interação com o nossos amados usuários, pois são eles os responsáveis pelo sucesso ou não da nossa aplicação.

Ajax

Em se tratando de interação em páginas web, aplicações, e etc, temos como um ponto muito forte, a metodologia do Ajax em conjunto com o JavaScript, sendo possível a realização de requisições de forma muito mais transparente ao usuário. Requisições Ajax são muito utilizadas hoje em dia nas mais diversas aplicações e nos mais diversos métodos de requisição.

Ajax (acrônimo em língua inglesa de Asynchronous Javascript and XML[1], em português “Javascript e XML Assíncrono”) é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações

Fonte: https://pt.wikipedia.org/wiki/AJAX_(programação)

jQuery

Você vai aprender neste tutorial, como realizar uma requisição via Ajax e a biblioteca jQuery. Já falamos um pouco sobre essa biblioteca no blog Código Master, alguns exemplos sãos as postagens:

A biblioteca jQuery, possui um conjunto completo de recursos de Ajax que podem ser utilizados, de forma a proporcionar ao programador, sua utilização com maior facilmente. Dentre os métodos e funções disponíveis, falaremos especificamente de dois deles, jQuery.get() e jQuery.post(), que carregam dados do servidor, por meio de requisições get e post (Leia mais em http://api.jquery.com/category/ajax/).

jQuery.get() e jQuery.post()

Os métodos get e post, são idênticos. Ambos possuem os parâmetros url, data, success e dataType. Veja a seguir os detalhes de cada parâmetro:

Parâmetros jQuery.get() e jQuery.post()

  • url (Type String): É o caminho do arquivo, para onde os dados devem ser enviados. É uma script simples, com a URL completa ou relativa do arquivo (quando possível).
  • data (Type: PlainObject or String): Os dados, podem ser enviados em forma de uma objeto, jSON por exemplo, ou mesmo um texto simples, com os valores a serem enviados.
  • success (Type: Function( PlainObject data, String textStatus, jqXHR jqXHR )): Este método é utilizado para realizar uma açção quando a requisição realizada pelo método obter sucesso. Você também pode simplesmente não fazer nada.
  • dataType (Type: String): Neste deve-se informar o tipo de dados que o servidor está esperando.

Existem ainda um último parâmetro, settings. Ele é responsável por realizar alterações nas configurações padrões da requisição do Ajax. Ele não é exatamente utilizado. Eu trabalho a um bom tempo com programação Web, e nunca tive a necessidade de sua utilização, mas caso tenha interesse, pode estar acessando este link para mais detalhes: http://api.jquery.com/jQuery.ajaxSetup/.

Enviando dados via Ajax e jQuery

Para podermos enviar os dados, como vimos, temos vários métodos. Hoje, vamos ver um exemplo de dois, get e post. Vamos criar de início, duas páginas. Uma página simples, com os campos para preenchimento dos dados que enviaremos, e uma outra em PHP, para leitura e retorno dos dados do servidor.  Fique à vontade para criar sua página na linguagem de sua preferência.

Arquivo para envio dos dados

Crie um arquivo, semelhante ao exibido a seguir:

Observe que estamos fazendo referência a dois scripts, o primeiro, à última versão (no momento do tutorial) da biblioteca do jQuery, e em segundo, a um arquivo em vamos criar para tratar nossas funções jQuery.

Arquivo que fará a leitura dos dados no servidor

Vamos criar um arquivo simples, que fará a leitura e retornos dos dados enviados ao servidor.

Veja que estou lendo os dados supostamente enviados (sem realizar nenhum nenhum tratamento dos dados, pois nçao é o foco do tutorial de hoje), e em seguida estou exibindo-os na tela, em formato jSON.

A página em HTML que criamos, chamremos de index.html, enquanto que o arquivo criado acima, chamaremos de ajax.php.

Arquivo de manipulação jQuery

Vamos criar agora, o arquivo script.js, que conterá as funções necessárias para utilização dos métodos get e post em ajax. Criamos em nosso index.html, o elemento com id igual a btnEnviarDados. Baseando nele, a função será como no exemplo a seguir:

Criamos no exemplo acima, uma função que fica “escutando” uma ação click, no elemento com id btnEnviarDados. Nela, invocaremos o método get/post para envio dos dados via Ajax.

Pegando os dados a serem enviados:

Criando as variáveis de parâmetros:

Agora, a parte mais importante: O método get/post do jQuery.

Usaremos 3, dos parâmetros necessários para seu funcionamento: URL, Data e Success. Observe que não é necessário informar o quarto parâmetro, o dataType, isso porque, o jQuery já consegue por padrão, reconhecer alguns formatos de retorno, como por exemplo, xml, json, script, text, html.

Método post jQuery:

Neste ponto, você já está enviando os dados via Ajax pelo método post, porém não estamos tratando o retorno na função. Vamos tratar o retorno dos dados, para podermos exibi-los na página.

Como na página ajax.php, nós estamos retornando os dados em formato jSON, converteremos a string de retorno para um objeto jSON, e para isso, vamos adicionar o seguinte código dentro da função.

Tratando o retorno dos dados:

Agora com os dados convertidos, basta utilizá-los. Exemplo:

Veja como ficou o arquivo script.js por completo.

Acredito que assim como eu, você tenha achado o envio de dados via ajax, com jQuery muito simples e fácil. Você pode (e deve) estudar mais a fundo os métodos Ajax da biblioteca jQuery, pois eles possuem uma infinidade de ações que podem ser aproveitadas em algum momento.

Bom, é isso. Fico por aqui. Espero ter ajudado.

Ah! Se possível, deixe seu comentário no final da página. Deixe suas sugestões, reclamações, dúvidas e claro, se tiver, seus elogios. Todos são muito bem vindos.

Um grande abraço e até o próximo post.

Autor(a):
Claudeci Goularte
Formado em Análise e Desenvolvimento de Sistemas pela Faculdade de Filosofia, Ciências e Letras Santa Marcelina, e pós-graduado em Arquitetura de Software, pelo Instituto de Gestão em Tecnologia da Informação, o IGTI. Sou desenvolvedor de sistemas desde 2006, com ampla experiência em PHP, MySQL, C#, SQLServer, CSS, HTML, JavaScrit, JQuery, C#, SqlServer, entre outras. Amante da profissão.

Deixe uma resposta

Seu endereço de e-mail não será publicado. Campos marcados são obrigatórios *