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:

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tutorial jQuery Código Master</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <input type="text" name="nome" id="nome" />
  <input type="email" name="email" id="email" />
  <input type="submit" value="Enviar dados" id="btnEnviarDados">
  
  <div id="result"></div> 
</body>
</html>

<!DOCTYPE HTML>

<head>

<title>Tutorial jQuery Código Master</title>

</head>

<body>

</body>

</html>

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.

<?
// recebe os dados
$nome = $_POST["nome"];
$email = $_POST["email"];
 
// imprime na tela em formato json
echo json_encode(
	array(
		"email" => $email, 
		"nome" => $nome
	)
); 
?>

// recebe os dados

$nome = $_POST["nome"];

$email = $_POST["email"];

// imprime na tela em formato json

echo json_encode(

array(

"email" => $email,

"nome" => $nome

)

);

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:

$(document).on('click', "#btnEnviarDados", function () {
   // aqui implementaremos o método jQuery
});

$(document).on('click', "#btnEnviarDados", function () {

// aqui implementaremos o método jQuery

});

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:

// pegando os dados
var vNome = $("#nome").val();
var vEmail = $("#email").val();

// pegando os dados

var vNome = $("#nome").val();

var vEmail = $("#email").val();

Criando as variáveis de parâmetros:

// criando as variáveis
var vUrl = "ajax.php";
var vData = { nome:vNome, email:vEmail };

// criando as variáveis

var vUrl = "ajax.php";

var vData = { nome:vNome, email:vEmail };

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:

$.post(
   vUrl, //Required URL of the page on server
   vData,
   function(response,status)
   {
      // aqui faremos o tratamento    	
   }
);

$.post(

vUrl, //Required URL of the page on server

vData,

function(response,status)

{

// aqui faremos o tratamento

}

);

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:

// tratando o status de retorno. Sucesso significa que o envio e retorno foi executado com sucesso.
if(status == "success")
{
   // pegando os dados jSON
   var obj = jQuery.parseJSON(response);
}

// tratando o status de retorno. Sucesso significa que o envio e retorno foi executado com sucesso.

if(status == "success")

{

// pegando os dados jSON

var obj = jQuery.parseJSON(response);

}

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

$("#result").html(
   "Nome enviado: " + obj.nome + "<br>" +
   "E-mail enviado: " + obj.email
);

$("#result").html(

"Nome enviado: " + obj.nome + "<br>" +

"E-mail enviado: " + obj.email

);

Veja como ficou o arquivo script.js por completo.

$(document).on('click', "#btnEnviarDados", function () {
	
  // pegando os dados
  var vNome = $("#nome").val();
  var vEmail = $("#email").val();
	
  // criando as variáveis
  var vUrl = "ajax.php";
  var vData = { nome:vNome, email:vEmail };
 
  $.post(
   vUrl, //Required URL of the page on server
   vData,
   function(response,status)
   {
     // tratando o status de retorno. Sucesso significa que o envio e retorno foi executado com sucesso.
     if(status == "success")
     {
        // pegando os dados jSON
        var obj = jQuery.parseJSON(response);
 
       $("#result").html(
         "Nome enviado: " + obj.nome + "<br>" +
         "E-mail enviado: " + obj.email
       );
     }    	
   }
  );
});

$(document).on('click', "#btnEnviarDados", function () {

// pegando os dados

var vNome = $("#nome").val();

var vEmail = $("#email").val();

// criando as variáveis

var vUrl = "ajax.php";

var vData = { nome:vNome, email:vEmail };

$.post(

vUrl, //Required URL of the page on server

vData,

function(response,status)

{

// tratando o status de retorno. Sucesso significa que o envio e retorno foi executado com sucesso.

if(status == "success")

{

// pegando os dados jSON

var obj = jQuery.parseJSON(response);

$("#result").html(

"Nome enviado: " + obj.nome + "<br>" +

"E-mail enviado: " + obj.email

);

}

);

});

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”

JEFFERSON SOARES COSTA JUNIOR disse:

13 de março de 2019 às 00:29

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?

1. Claudeci Goularte disse:
  
  13 de março de 2019 às 09:30
  
  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.
  
Ronnerson Queiroz Benjamin disse:

26 de abril de 2019 às 14:34

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/

1. Claudeci Goularte disse:
  
  7 de maio de 2019 às 15:51
  
  Não aconcelho fazer essa forma. Mas isso seria uma longa mudança.
  
gesser disse:

2 de maio de 2019 às 12:28

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?

1. Claudeci Goularte disse:
  
  7 de maio de 2019 às 15:48
  
  Sim. Você pode obter via foreach. Veja um exemplo:
  if(count($_POST) > 0) {
  foreach ($_POST as $name => $valor) { echo "variável $name = $valor "; }
  }

Ajax

jQuery

jQuery.get() e jQuery.post()

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

Enviando dados via Ajax e jQuery

Arquivo para envio dos dados

Arquivo que fará a leitura dos dados no servidor

Arquivo de manipulação jQuery

Pegando os dados a serem enviados:

Método post jQuery:

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

Leave a Reply Cancel reply