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

Compartilhar é se importar!

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.



6 thoughts on “Enviando dados via Ajax e jQuery GET e POST Leia mais em

    1. 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.

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

  2. 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?

Leave a Reply

Your email address will not be published. Required fields are marked *