Guia jQuery
5 minutos

Ajax com jQuery: Como evitar múltiplas requisições ao servidor

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (25)  (0)

Aprenda neste conteúdo como bloquear um botão utilizando jQuery, algo muito útil para evitar múltiplos cliques e, consequentemente, várias 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

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?