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 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
- Curso jQuery Básico
- Curso Dominando Ajax com jQuery
