0

Как можно реализовать динамическое обновление страницы при добавлении новых новостей?

Допустим сайт открыт, контент загружен, и когда добавляется новая новость, должна появиться кнопка "Показать". И соответственно при нажатии - показать. А если добавились сразу несколько новостей - показать все.

Понял что надо делать используя AJAX и jQuery.

Есть файл news.php который сначала выводит пять новостей и каждые 10 секунд проверяет есть ли новая новость и передает его в <div id='news'></div>:

<?php
include "config.php";
$zap = $_POST['zap'];

$sql = "SELECT * FROM kloop_arts ORDER BY id DESC LIMIT 5";
$news = $pdo->prepare($sql);
$news->execute();
$newsData = $news->fetchAll();

foreach ($newsData as $row) {
    echo "Титл: ".$row['title']."<br>
        лиинк: ".$row['link']."<br>";
}
?>
<script type="text/javascript">
  setInterval(function(){
    $.post('news.php',{zap:'zap'},function(data){
      if(data){
        $('#news').text(data);
      }
    });
  },10000);
</script>

<div id='news'>


</div>

Есть также работающий файл newfile.php. Он взаимодействует с файлом ajax.php (который представлен позже) и подгружает контент. То есть при открытии страницы показывает 5 новостей, и потом при нажатии кнопки следующие пять и т.д.:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Кнопка "Показать еще" на ajax</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>

    <style>

    </style>

    <script>
        $(document).ready(function(){

            $('#show_more').click(function(){
        var btn_more = $(this);
        var count_show = parseInt($(this).attr('count_show'));
        var count_add  = $(this).attr('count_add');
        btn_more.val('Подождите...');

        $.ajax({
                    url: "ajax.php", // куда отправляем
                    type: "post", // метод передачи
                    dataType: "json", // тип передачи данных
                    data: { // что отправляем
                        "count_show":   count_show,
                        "count_add":    count_add
                    },
                    // после получения ответа сервера
                    success: function(data){
            if(data.result == "success"){
                $('#content').append(data.html);
                    btn_more.val('Показать еще');
                    btn_more.attr('count_show', (count_show+5));
            }else{
                btn_more.val('Больше нечего показывать');
            }
                    }
                });
            });

        });
    </script>

</head>
<body>
    <div id="content">
        <?php
            include "config.php";
            $sql = "SELECT * FROM kloop_arts order by id desc LIMIT 5";
            $news = $pdo->prepare($sql);
            $news->execute();
            $newsData = $news->fetchAll();
            foreach($newsData as $oneNews):
        ?>
        <div>
            <b><?=$oneNews['title'];?></b>
            <p><?=$oneNews['date'];?></p>
        </div>
        <?php endforeach; ?>
    </div>

    <input id="show_more" count_show="5" count_add="5" type="button" value="Показать еще" />
</body>
</html>

Файл ajax.php:

<?include "config.php"; // подключение к базе данных

$countView = (int)$_POST['count_add'];  // количество записей, получаемых за один раз
$startIndex = (int)$_POST['count_show']; // с какой записи начать выборку

// запрос к бд
$sql = "SELECT * FROM kloop_arts ORDER BY id DESC LIMIT $startIndex, $countView";
$news = $pdo->prepare($sql);
$news->execute();
$newsData = $news->fetchAll();
if(empty($newsData)){
    echo json_encode(array(
        'result'    => 'finish'
    ));
}else{
    // если новости получили из базы, то сформируем html элементы
    // и отдадим их клиенту
    $html = "";
    foreach($newsData as $oneNews){
        $html .= "
            <div>
                <b>{$oneNews['title']}</b>
                <p>{$oneNews['date']}</p>
            </div>
        ";
    }
    echo json_encode(array(
        'result'    => 'success',
        'html'      => $html
    ));
}

И в результате мне надо соединить эти файлы, чтобы он подгружал новости по кнопке по мере их поступления.

8
  • так по кнопке - или по мере их поступления oO? 9 янв 2018 в 17:56
  • @АлександрБелинский по мере их поступления обрабатывать их, и выводить по кнопке. 9 янв 2018 в 17:57
  • у вас тут два вариата, либо сокеты и уведомления от сервера на клиент, либо таймер по проверке наличия новых аяксом на клиенте.
    – teran
    9 янв 2018 в 18:35
  • а пардоньте :) не прочитал вопрос :) у вас второй вариант реализован
    – teran
    9 янв 2018 в 18:36
  • @teran второй реализован но совместить это с кнопкой. Это проблемка для меня, не знаете как? 9 янв 2018 в 18:39

0

Ваш ответ

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

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