Enviando dados via Ajax e jQuery GET e POST Leia mais em

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

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.

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.

Claudeci Goularte

Programador com mais de 11 anos de experiência, graduado em Análise e Desenvolvimento de Sistemas, e pós graduado em MBA em Arquitetura de Software. Sou Sócio fundador e administrador na empresa Kamoney Empreendimentos Digitais Ltda.

Você pode gostar...

6 Resultados

  1. boa mas eu gostaria de saber com php curl ou com esse metodo, como faço para enviar dados de um site (dominio1) para outro site (dominio2), que metodo eu utilizo?

    • Basicamente, usando jQuery, mudaria a variável de vUrl, para o domínio2, no seu caso, porém, o domínio2, precisaria estar com os
      Cross-Origin Resource Sharing (CORS) habilitados, caso contrário, ele não irá permitir o envio dos dados.

  2. amigos boa tarde preciso de ajuda meu caso e bem parecido
    eu tenho uma tabela onde abre um modal com 3 abas!
    cada aba tem uma tabela com dados relacionados a esta tabela principal ate ai tudo bem!
    agora para abrir modal e enviandoi os dados estou usando da seguinte forma

    <button type="button" class="btn btn-info btn-sm glyphicon glyphicon-edit" data-toggle="modal" data-target="#meumodal" data-whatever="” data-whatevercnpj=”” data-whateverrazaosocial=”” data-whatevercontato=”” data-whatevertelefone=”” data-whatevercelular=”” data-whateveremail=”” data-whateverrua=”” data-whatevercep=”” data-whateverbairro=”” data-whatevercidade=”” data-whateveruf=”” data-whatevercontato=”” data-whateveroutro=”” data-whateverwww=”” data-whateversituacao=”” data-whatevern=”” data-whateverfantasia=”” data-whateveratividade=”” data-whatevernatureza=”” data-whatevertipo=”” data-whatevercpsocial=”” data-whateverabertura=”” data-whatevercomplemento=””> ATENDI

    ele abre o primeiro formulario do modal tudo certo so que o segundo ele tem uma tabela e preciso receber o id via POST ou GET para poder fazer o filtro na hora de carregar o formulario dentro do modal
    uso a seguinte screipt para carregar o form no modal

    $( “#listaratendimento” ).load( “form_modal_atendimento.php” );
    preciso enviar junto o id nessa chamada alguem pode me ajudar ???

    ai esta o projeto quem quiser abrir e entender
    http://allinonesolutions3.hospedagemdesites.ws/sistema/

  3. gesser disse:

    Muito boa a sua orientação, ajudou muito.
    tem alguma forma de pegar os dados dos imputs de uma vez só, sem precisar declarar a variável individual?

Deixe uma resposta para gesser Cancelar resposta

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