Artigos HTML e CSS Ajax com jQuery: Como evitar múltiplas requisições ao servidor
Clique do botão

Quando efetuamos um click no botão, o jQuery monitora este evento e executa uma função anônima, que contém uma requisição HTTP (Ajax) e altera as propriedades no HTML, entre outras ações. Veja como funciona este comportamento na Figura 1.

Evento click sendo acionado
Figura 1. Evento click sendo acionado

Evento click do jQuery

O evento click é enviado para um elemento quando o ponteiro do mouse está sobre o elemento e o botão do mouse é pressionado e liberado. Qualquer elemento HTML pode receber esse evento:

   $( "#botaoSalvar" ).click(function() {
     //Executar alguma instrução
   });

Função Prop para manipular propriedades

A diferença entre atributos e propriedades pode ser importante em situações específicas. O método .prop() fornece uma maneira de recuperar explicitamente valores de propriedade. Por exemplo, um checkbox que tem um atributo booleano retornaria com o prop() true ou false.

Atributo disabled

O atributo disabled é um atributo booleano e quando está presente no <button disabled=”disabled” /> determina que o botão deve ser desabilitado. Um botão desativado é inutilizável e não pode ser clicado.

O atributo disabled pode ser configurado para evitar que um usuário clique no botão até que alguma outra condição tenha sido atendida (como o envio de um formulário através de uma requisição ajax).

Função para requisição HTTP através do método GET ($.get())

A função $.get() tem como objetivo realizar a requisição assíncrona ao servidor por meio do método HTTP GET, ou seja, ela é uma forma reduzida de implementar a função $.ajax(), conforme o código abaixo:

$.get( "sorteio.php" ).done(function(resultado) {
});

Nesse caso, informamos primeiramente a URL que receberá a requisição, e como segundo parâmetro, uma função que tratará seu retorno. Nessa função, o argumento resultado será preenchido com o conteúdo retornado pelo servidor.

Função para requisição HTTP através do método POST ($.post())

A função $.post() também é uma forma simplificada de $.ajax(), no entanto, dessa vez as requisições são enviadas por meio do método HTTP POST, como mostra o código abaixo:

$.post( "senha.php" ,{ senha: $("#senha").val() } ).done(function(data) {
   
});

Função .html() para manipular informações em documento HTML

Em um documento HTML, .html () pode ser usado para obter ou incluir um conteúdo em qualquer elemento. Se a expressão do seletor corresponder a mais de um elemento, somente a primeira partida terá seu conteúdo HTML retornado.

Agora que conhecemos as funções principais para manipular textos e enviar requisições, veremos como funciona uma solicitação assíncrona utilizando o método GET detalhadamente no código a seguir:

$(document).ready(function() {
   
     var botaoSalvar = $( "#botaoSalvar" );
   
     botaoSalvar.click(function() {
        
         botaoSalvar.html('Aguarde...');
         botaoSalvar.prop('disabled', true);
   
         $.get( "sorteio.php" )
          .done(function(resultado) {
   
             $("#resultadoSorteio").html(resultado);
   
             botaoSalvar.html('Sortear Número');
             botaoSalvar.prop('disabled', false);
   
         });
   
   
     });
});

Linha 01: É utilizada a função ready para executar o código dentro dela apenas quando o documento todo for carregado. Isso é importante para evitar a execução da função que não foi iniciada.

Linha 03: Iniciamos uma variável recebendo o objeto jQuery do botão.

Linha 05: Iniciamos a função click e passamos como parâmetro uma função anônima que vai executar uma ação quando o evento for acionado através do clique do botão.

Linha 07: Agora efetuamos a mudança do texto do botão com a função html(), responsável por pegar o conteúdo de texto do elemento que, neste caso, “<button>Conteúdo<button/>”.

Linha 08: Alteramos a propriedade disabled para true para transformar em um botão desabilitado.

Linha 10: Efetuamos uma requisição HTTP para buscar o resultado em um servidor web.

Linha 11: O manipulador .done() será chamado no caso de um retorno com sucesso, e será executada uma função anônima para processar o resultado que, pelo parâmetro da função, é nomeado de resultado.

Linha 13: Através do .html() adicionamos em uma tag <span/> o texto que retornou da requisição HTTP.

Linha 14: Alteramos o texto do botão novamente com a função .html() retornando o valor anterior.

Linha 15: Voltamos a propriedade disabled para o seu estado inicial, liberando o acesso ao botão.

Veja agora como efetuar uma requisição utilizando o método POST no código abaixo:

$(document).ready(function() {
   
     var botaoSalvar = $( "#botaoSalvar" );
     var inputSenha = $( "#senha" );
   
     botaoSalvar.click(function() {
   
         botaoSalvar.html('Aguarde...');
         botaoSalvar.prop('disabled', true);
   
         $.post( "senha.php" ,{ senha: $("#senha").val() } )
         .done(function(data) {
   
             $("#resultadoAtualizacao").html(data);
   
             botaoSalvar.html('Atualizar Senha');
             botaoSalvar.prop('disabled', false);
             inputSenha.val('');
   
         });
     });
});

Linha 01: É utilizada a função ready para executar o código dentro dela apenas quando o documento todo for carregado. Isso é importante para evitar a execução da função que não foi iniciada.

Linha 03: Iniciamos uma variável recebendo o objeto jQuery do botão.

Linha 04: Temos uma variável inputSenha para receber o objeto do campo input identificado como senha.

Linha 06: Iniciamos a função click e passamos como parâmetro uma função anônima que vai executar uma ação quando o evento for acionado através do clique do botão.

Linha 08: Agora efetuamos a mudança do texto do botão com a função html(), responsável por pegar o conteúdo de texto do elemento ”<button>Conteúdo<button/>”

Linha 09: Alteramos a propriedade disabled para true, transformando em um botão desabilitado.

Linha 11: Efetuamos uma requisição HTTP através do método POST para enviar informações ao servidor web. Estamos enviando como parâmetro a informação preenchida no campo senha.

Linha 12: O manipulador .done() será chamado no caso de um retorno com sucesso, e será executada uma função anônima para processar o resultado que, pelo parâmetro da função é nomeado resultado.

Linha 14: Através do .html() adicionamos em uma tag <span/> o texto que retornou da requisição HTTP.

Linha 15: Alteramos o texto do botão novamente com a função .html() retornando o valor anterior.

Linha 16: Voltamos a propriedade disabled para o seu estado inicial liberando o acesso ao botão.

Sugestão de conteúdo