Ajax выдает данные только после перезагрузки страницы

Question

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

Я добавляю html-данные к:
<ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">

Но мой код загружает только новый результат после перезагрузки страницы.
Кроме того, каждый цикл повторяет одни и те же данные 2 раза.

Что не так?

<script>
    $.ajax({
    type: "POST",
    url: 'inc/file.php',
    dataType: 'json',
    success: function(response)
    {
        if (response) {

            var html = '';
            $.each(response, function(key, value){
                html += "<li><a href='editArticle?id="+response.id+"&amp;act='><span>"+response.title+"</span><span>"+response.story+"</span></a></li>";

            })
            $('#menu1').prepend(html);
            $('#number').text(response.number);

        }
    }
});
</script>

Вот мой файл file.php, в то время как он загружает только одни данные:

<?php 

require $_SERVER['DOCUMENT_ROOT'].'/config/init.php';

require CLASS_PATH.'article.php';

$article = new Article();

$list = $article->getInactiveArticle();
$number = $article->countInactiveArticle();

$output = [];
foreach ($list as $lists) {
    $output['title'] = $lists->title;
    $output['id'] = $lists->id;
    $output['story'] = $lists->story;
    $output['number'] = $number[0]->inactive_articles;
}

echo json_encode($output);

Answer 1

Вы можете проверить следующий блок кода.

Он проверяет каждые 5 секунд и выполняет операции.

    $(document).ready(function () {
    var eint = window.setInterval(function () {
            $.ajax({
            type: "POST",
            url: 'inc/file.php',
            dataType: 'json',
            success: function(response)
            {
                if (response) {

                    var html = '';
                    $.each(response, function(key, value){
                        html += "<li><a href='editArticle?id="+response.id+"&amp;act='><span>"+response.title+"</span><span>"+response.story+"</span></a></li>";

                    })
                    $('#menu1').prepend(html);
                    $('#number').text(response.number);

                }
            }
        });
    },5000);
)};

Answer 2

Попробуйте использовать функцию setTimeout().

function timeout() {
  setTimeout(function(){ 
    $.ajax...

    timeout()
  }, 3000);

}

Посмотрите документы здесь