Php ajax fetching same file html again and again - php

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.