1

Привет нашел в интернете классную вещь, которую хочу поставить для своего простенького самописного сайта. Система рейтинга лайков дизлайков. Не все работают без перезагрузки страницы.

А именно данные в правой части обновляются только после перезагрузки страницы. Мои знания в языках мизирные, поэтому без помощи мне не разобраться. Нужно, чтоб все показывалось без перезагрузки страницы

введите сюда описание изображения Вот сайт на котором есть данный код:

 <head>
    <meta charset="utf-8" />
    <title>Youtube Like & Dislike System</title>
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    </head>

    <body>
    <?php
    include 'config.php';
    $user_ip = $_SERVER['REMOTE_ADDR'];
    $pageID = '1'; // The ID of the page, the article or the video ...

    //function to calculate the percent
    function percent($num_amount, $num_total) {
        $count1 = $num_amount / $num_total;
        $count2 = $count1 * 100;
        $count = number_format($count2, 0);
        return $count;
    }

    // check if the user has already clicked on the unlike (rate = 2) or the like (rate = 1)
    $dislike_sql = mysql_query('SELECT COUNT(*) FROM  rating WHERE ip = "'.$user_ip.'" and id_item = "'.$pageID.'" and rate = 2 ');
    $dislike_count = mysql_result($dislike_sql, 0); 

    $like_sql = mysql_query('SELECT COUNT(*) FROM  rating WHERE ip = "'.$user_ip.'" and id_item = "'.$pageID.'" and rate = 1 ');
    $like_count = mysql_result($like_sql, 0);  

    // count all the rate 
    $rate_all_count = mysql_query('SELECT COUNT(*) FROM  rating WHERE id_item = "'.$pageID.'"');
    $rate_all_count = mysql_result($rate_all_count, 0);  

    $rate_like_count = mysql_query('SELECT COUNT(*) FROM  rating WHERE id_item = "'.$pageID.'" and rate = 1');
    $rate_like_count = mysql_result($rate_like_count, 0);  
    $rate_like_percent = percent($rate_like_count, $rate_all_count);

    $rate_dislike_count = mysql_query('SELECT COUNT(*) FROM  rating WHERE id_item = "'.$pageID.'" and rate = 2');
    $rate_dislike_count = mysql_result($rate_dislike_count, 0);  
    $rate_dislike_percent = percent($rate_dislike_count, $rate_all_count);
    ?>

    <script>
    $(document).ready(function() {
        var pageID = <?= $pageID;  ?>; 


        $(document).on('click', '.like-btn', function(){    

        $('.dislike-btn').removeClass('dislike-h');    
            $(this).addClass('like-h');
                $.ajax({
                    type:"POST",
                    url:"ajax.php",
                    data:'act=like&pageID='+pageID,
                    success: function(){
                    }
                });
            });


        $(document).on('click', '.dislike-btn', function(){ 

        $('.like-btn').removeClass('like-h');
             $(this).addClass('dislike-h');
                $.ajax({
                    type:"POST",
                    url:"ajax.php",
                    data:'act=dislike&pageID='+pageID,
                    success: function(){
                    }
                });
            });

        }); 
    </script>



    <div class="tab-cnt">        
    <h1>Youtube Like & Dislike System With PHP, jQuery & Ajax</h1>
        <div class="tab-tr" id="t1">
            <div class="like-btn <?php if($like_count == 1){ echo 'like-h';} ?>">Like</div>
            <div class="dislike-btn <?php if($dislike_count == 1){ echo 'dislike-h';} ?>"></div>

            <div class="stat-cnt">
                <div class="rate-count"><?php echo $rate_all_count; ?></div>
                 <div class="stat-bar">
                    <div class="bg-green" style="width:<?php echo $rate_like_percent; ?>%;"></div>
                    <div class="bg-red" style="width:<?php echo $rate_dislike_percent; ?>%"></div>
                  </div>
                    <div class="dislike-count"><?php echo $rate_dislike_count; ?></div>
                    <div class="like-count"><?php echo $rate_like_count; ?></div>
            </div>            
        </div>

    </div>
    </body>
    </html>



    <?php
    include 'config.php';
    extract($_POST);
    $user_ip = $_SERVER['REMOTE_ADDR'];

    // check if the user has already clicked on the unlike (rate = 2) or the like (rate = 1)
    $dislike_sql = mysql_query('SELECT COUNT(*) FROM  rating WHERE ip = "'.$user_ip.'" and id_item = "'.$pageID.'" and rate = 2 ');
    $dislike_count = mysql_result($dislike_sql, 0); 

    $like_sql = mysql_query('SELECT COUNT(*) FROM  rating WHERE ip = "'.$user_ip.'" and id_item = "'.$pageID.'" and rate = 1 ');
    $like_count = mysql_result($like_sql, 0); 

    if($act == 'like'): //if the user click on "like"
        if(($like_count == 0) && ($dislike_count == 0)){
            mysql_query('INSERT INTO rating (id_item, ip, rate )VALUES("'.$pageID.'", "'.$user_ip.'", "1")');
        }
        if($dislike_count == 1){
            mysql_query('UPDATE rating SET rate = 1 WHERE id_item = '.$pageID.' and ip ="'.$user_ip.'"');
        }
    endif;

    if($act == 'dislike'): //if the user click on "like"
        if(($like_count == 0) && ($dislike_count == 0)){
            mysql_query('INSERT INTO rating (id_item, ip, rate )VALUES("'.$pageID.'", "'.$user_ip.'", "2")');
        }
        if($like_count == 1){
            mysql_query('UPDATE rating SET rate = 2 WHERE id_item = '.$pageID.' and ip ="'.$user_ip.'"');
        }
    endif;
    ?>
1
  • Сделай еще один селект и выведи его в ajax.php. Смотри, чтобы в файле больше ничего не выводилось. Далее в success прими данные в функцию и дальше по пришедешему результату обновляй нужное поле(лайк, дизлайк, общее) 14 мая 2018 в 18:18

1 ответ 1

1

Можешь выводить количество лайков и дизов в отдельные js-переменные, потом из менять при лайке или дизе и отображать новые значения на странице.

Вот пример кода:

<script>
    $(document).ready(function() {
      var pageID = <?= $pageID;  ?>; 

      var rateAllCount = <?= $rate_all_count;  ?>;
      var rateLikeCount = <?= $rate_like_count;  ?>;
      var rateDislikeCount = <?= $rate_dislike_count;  ?>;

      function updateRates() {
        $('.rate-count').text(rateAllCount);
        $('.like-count').text(rateLikeCount);
        $('.dislike-count').text(rateDislikeCount);
      }

      $(document).on('click', '.like-btn', function() {    
        $.ajax({
          type:"POST",
          url:"ajax.php",
          data:'act=like&pageID='+pageID,
          success: function() {
            $(this).addClass('like-h');
            rateLikeCount++;
            if ($('.dislike-btn').hasClass('dislike-h')) {
              $('.dislike-btn').removeClass('dislike-h');
              rateDislikeCount--;
            } else {
              rateAllCount++;
            }
            updateRates();
          }
        });
      });

      $(document).on('click', '.dislike-btn', function(){ 
        $.ajax({
          type:"POST",
          url:"ajax.php",
          data:'act=dislike&pageID='+pageID,
          success: function() {
            $(this).addClass('dislike-h');
            rateDislikeCount++;
            if ($('.like-btn').hasClass('like-h')) {
              $('.like-btn').removeClass('like-h');
              rateLikeCount--;
            } else {
              rateAllCount++;
            }
            updateRates();
          }
        });
      });

    }); 
</script>
1
  • спасибо за такое описание, но все же получается, что сколько раз мы нажимаем на лайк, столько счетчик и показывает, а хотелось бы чтоб, лайк или дислайк прибавлялись от одного человека один раз. А здесь получается сколько нажимаешь, столько и прибавляется 15 мая 2018 в 17:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.