Question

当存在状态为unread的行时，此代码将显示一个计数器，当用户单击图标{{时，它将为状态为UPDATE的行read。 1}}。

问题是：这无法正常工作，当我单击<i class="fas fa-bell"></i>时，它会延迟3到9秒来将计数器更新为0，它会立即更新我的表，只有更新的计数器有些延迟，但是有时我需要重新加载页面并单击图标以更新我的表，为什么？怎么了？

html： <i class="fas fa-bell"></i>

脚本：

<span class="text-white divCountNT" id="datacount"></span>

select.php：

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

    $("#datacount").load("select.php");

    setInterval(function(){
    $("#datacount").load('select.php')
    }, 10000);

  });

  $(document).on('click', '.fa-bell', function (){

    $.ajax({
       type: "POST",
       url: "update.php"
    });

  });
</script>

update.php：

<?php
require_once 'db.php';

if(!isset($_SESSION))session_start();

if(isset($_SESSION['user_id'])) {
  $user_id = $_SESSION['user_id'];
}

$status = 'unread';
$sql = $conn->prepare("SELECT * FROM noti WHERE status = :status AND user_id = :user_id");
$sql->bindParam(':user_id', $user_id, PDO::PARAM_INT);
$sql->bindParam(':status', $status, PDO::PARAM_STR);
$sql->execute();
$countNT = $sql->rowCount();

if($countNT >= 1){
echo $countNT;
}

?>

Answer 1

您的ajax调用没有回调函数，因此表仅使用load函数进行更新。您的ajax调用应该是这样的：

$.ajax({
   type: "POST",
   url: "update.php"
}).done(function() {
   window.location.reload(true);
});

Answer 2

您可以尝试使用此代码，效果很好

$.ajax({
   type: "POST",
   url: "update.php"
   success: function(result){
        $(body).find("#loadData").html(result);
       // $(body).find("#loadData").append(result); //you can also use for append data insted of replace
   }
   error: function(xhr){
        alert("An error occured: " + xhr.status + " " + xhr.statusText);
   }
});

选中此项以使用更多的AJAX https://www.w3schools.com/jquery/ajax_ajax.asp方法

jQuery + Ajax无法正常工作，为什么？

2 个答案: