Javascript Contador de cliques sem redirecionar

[Pedro Henruqe]

Preciso implementar um contador de cliques no meu site. Ao clicar em um link, o script deve incrementar um no valor de um banco de dados. É necessário que nenhuma página seja aberta. Dei uma pesquiada e não encontrei nada muito sólido. Tenho certeza que isso é possível. Acho que a melhor forma é fazer uma função em JavaScript que, quando acionada envia um POST para uma página PHP. Não sei como programar isso no script. Parece que AJAX é uma solução, mas não tenho certeza. Se alguém souber como fazer ou contornar, favor ajude.

[DiF]

@Pedro Henruqe Olá,   sim.  a solução é usar ajax.  É uma técnica de requisição assíncrona ao servidor.

 

Basicamente você pode fazer de N maneiras, desde o javascript puro, até frameworks.

Pela facilidade de entendimento, recomendo o jQuery.

 

Basicamente você vaj chamar a função $.ajax() toda vez que clicar no lugar para incrementar em 1.

 

Exemplo:

Primeiramente a biblioteca jquery deve ser chamada primeiro.  Eu indico que uses o CDN do google é que mais seguro, onde você garante que sempre vai estar online.(obviamente se quiser mais desempenho, você precisa baixar o jQuery e colocar no seu servidor para chamar.

 

Então no exemplo usarei o CDN:

<script
  src="http://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

Com isso você já tem o jquery na sua página.

 

Agora podes usar o jquery.

 

HTML:

<a href="#" class="btn_add">Adicionar +1</a> 

jQuery:

<script>
  $(document).ready(function(){
     var botao = $(".btn_add");
  
     //ação de clicar no botão +1
     botao.on("click", function(){
          var numero = 1;
          $.ajax({
                url: "processa.php",
                data: {valor: numero},
                dataType: "HTML",
                method: "GET"
          }).done(function(retorno){
                   alert(retorno);   
          }).fail(function(retorno){
                alert(retorno);
          });
 
     }); 
 });
  
</script>  

e no php:

 

<?php
    $valor = $_GET["valor"];

    include "conexao.php";

    $atualiza = mysqli_query($conexao, "UPDATE contadores SET clicks= clicks+$valor");


   if($atualiza):
       echo "Contador atualizado";
   else:
       echo "Não foi possível atualizar o contador";
   endif;

Seria algo como isso.

Talvez você nem precise usar o data do ajax para enviar um valor...  mas essa eu fico lhe devendo.

[Guilherme Maciel da Rocha]

E tem algum modo de fazer com que conte o clique apenas uma vez? Para evitar que uma pessoa possa clicar várias vezes e contar várias vezes. Bloquear por exemplo, por IP, sei lá. Obrigado.

[DiF]

@Guilherme Maciel da Rocha Sim, seria o caso de apenas bloquear o botão depois de clicado uma vez.

 

Exemplo:

<button type="button" class="btn btn-success votar">Votar</button>
<p></p>

jQuery:

var btn = $(".votar");

btn.on("click", function(){
    $("p").html("Obrigado por Votar.");
    $(this).prop("disabled", true);
});

Veja este exemplo funcionando: https://jsfiddle.net/dife/7nrhmy3a/12/

 

Basicamente, insere o atributo disabled no elemento button

 

PS: no exemplo foi usado o bootstrap.