Сделайте ajax-запрос на количество кликов по ссылке

Question

Я должен подсчитать клики по ссылке и передать результат в php-файл. Я думаю, что это делается с помощью ajax-запроса.

<a class='link' href='www.site.com'>Open</a>

<script>
var count=0;
$('.link').on('click',function(){
count+=1;
});
</script>

Что мне делать дальше?Как передать счетчик в массив POST или Get?

Answer 1

Для подсчета кликов по ссылке вы должны передать что-то вроде идентификатора ссылки (из db) или другой идентификатор, который вы можете использовать для увеличения счетчика на сервере - если вы пытаетесь отправить обновленный счет изклиент может быть уязвим для злоупотреблений - было бы очень легко изменить количество при желании.

Вы можете использовать ajax, как в следующем, непроверенном примере - он может дать вам представление о том, как действовать.

<?php

    /* test.php */

    if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['id'] ) && !empty( $_POST['url'] ) ){
        $id=$_POST['id'];
        $url=$_POST['url'];

        $sql='update `links` set `count`=`count`+1 where `id`=? and `url`=?';
        $stmt=$db->prepare($sql);

        if( $stmt ){
            $stmt->bind_param('is', $id, $url );
            $res=$stmt->execute();

            exit( $url );
        }
        exit( false );
    }


?>

И фрагменты html и javascript

<a id=1 href='www.site.com' class='link'>Open Site</a>
<a id=2 href='www.example.com' class='link'>Open Example</a>
<a id=3 href='www.banana.com' class='link'>Open Banana</a>
<a id=4 href='www.spitfire.com' class='link'>Open Spitfire</a>
<a id=5 href='www.hellcat.com' class='link'>Open Hellcat</a>


<script>
    const ajax=function( url, params, callback ){
        with( new XMLHttpRequest() ){
            onreadystatechange=function(e){
                if( this.status==200 && this.readyState==4 )callback.call( this, this.response )
            }
            open( 'POST', url, true );
            setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            send( params );
        }
    };

    const clickcallback=function(r){
        if( r )window.open( r )
    };

    const clickhandler=function(e){
        e.preventDefault();
        let url='test.php';
        let params='id='+e.target.id+'&url='+encodeURI( e.target.href );
        ajax.call( this, url, params, clickcallback  )
    };


    Array.prototype.slice.call( document.querySelectorAll('a.link') ).forEach( a=>{
        a.addEventListener('click', clickhandler );
    })
</script>

Answer 2

Если вы хотите посчитать количество кликов по какой-либо ссылке, вам придется использовать файл или базу данных для сохранения значения, потому что PHP не сохраняет состояние.

Здесь я привожу пример использования базы данных для этого:

Аякс

$('.link').on('click',function(){
  $.ajax({
      url:"<?php echo 'Your url to incrementCount() method';?>",
      method:"POST",
      data:{},
      success:function(response){
          // on success do something
      }                    
  });
});

PHP-метод

public function incrementCount(){
  $UpdateQuery = "UPDATE link_counts SET link_count=link_count + 1 WHERE id=1";
  // here 'link_counts' is table name and 'link_count' is the column name to update
  $result = mysql_query($UpdateQuery );
}

Таблица «link_counts»

-------+------------+
|  id  | link_count |
-------+------------+

Здесь значение link_count по умолчанию равно 0. Таким образом, вы можете обновить поле при возникновении события щелчка класса .link.

Кроме того, вы можете использовать user_id, чтобы подсчитать, какой пользователь щелкнул по классу .link. Для этого вам нужно добавить условие where в запрос на обновление.

Если вы хотите сделать это с файлом, измените метод PHP следующим кодом:

PHP метод для обработки файлов

$file = 'link_counter.txt';

// default the counter value to 1
$counter = 1;

// add the previous counter value if the file exists    
if (file_exists($file)) {
    $counter += file_get_contents($file);
}

// write the new counter value to the file
file_put_contents($file, $counter);

Надеюсь, это поможет.