Php ajax一次又一次地获取相同的文件html

Question

I am working on notifications in php. In header file, I have written this function:

  $(document).ready(function() {      
      setInterval(getNotifys, 10000);      
      function getNotifys(){
            $.ajax ({                  
            method: "POST",
            url : 'get_notification.php',          
            success : function(data){
                console.log(data);            
                $('.notifications').html(data);                
            }
        });  
     }
 });    

And here is get_notification.php;

<?php
include("global.php");
if($logged==0){
    header("location:".$baseurl."login.html");
    exit();
}
$data=mysqli_query($con,"select * from notifications where admin=1 and resolved=0") or die (mysqli_error());
$count = mysqli_num_rows($data);
?>
<span class="badge badge-danger" style="margin-bottom:25px"><?php echo $count; ?></span>

It works perfectly over most of the pages, but in some pages, it occurs that instead of displaying count to notification icon, it shows whole page HTML. Even when I console in success function, It consoles whole page HTML. I am so confused why is it happening. Any ideas?

Answer 1

use json and create that span stuff in your javascript code.

    <?php
include("global.php");
if(!$logged) {
    http_response_code(401); // catch this error in ajax
    exit();
}

$data = mysqli_query($con,"select * from notifications where admin=1 and resolved=0");

if(!$data) {
    http_response_code(500); // catch this error in ajax
    exit(); 
}

$count = mysqli_num_rows($data);

echo json_encode(['count' => $count]);

JS:

      $(document).ready(function() {      
      setInterval(getNotifys, 10000);      
      function getNotifys(){
            $.ajax ({                  
            method: "POST",
            url : 'get_notification.php',          
            success : function(data){
                let data = JSON.parse(data);
                console.log(data);
                $('#notifications_count').html(data.count);                
            },
            error: function(jqXHR, textStatus, errorThrown) {
              console.log(textStatus, errorThrown);
            }
        });  
     }
 });

HTML:

<span class="badge badge-danger" style="margin-bottom:25px" id="notifications_count"></span>

Did not test this, but this shows you how you could do it.