Jquery + Ajax 不能正常工作，为什么？答案

【问题标题】：Jquery + Ajax is not working properly, why?Jquery + Ajax 不能正常工作，为什么？
【发布时间】：2018-11-30 06:32:30
【问题描述】：

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

问题是：这不起作用，当我点击  时，它会延迟 3-9 秒将计数器更新为 0，它会立即更新我的表，只有计数器会延迟，但有时我需要重新加载页面并单击图标来更新我的表格，为什么？怎么了？

html: 

脚本：

<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>

select.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;
}

?>

更新.php：

<?php
require_once 'db.php';

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

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

$status = 'read';
$sql = $conn->prepare("UPDATE noti SET status = :status WHERE 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();

echo $countNT;

?>

【问题讨论】：

标签： php jquery ajax counter

【解决方案1】：

您的 ajax 调用没有回调函数，因此您的表仅使用加载函数更新自身。你的 ajax 调用应该是这样的：

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

【讨论】：

我添加了这一行，现在我解决了延迟问题，但我仍然需要刷新页面才能更新我的表格
刷新页面？你如何填充表格数据？使用内联 php 代码或 ajax？如果是内联的，那么你必须刷新页面，但如果是 ajax，那么你可以调用那个 ajax 调用。
我不明白你的问题，我在我的问题中只在这个脚本上使用了 Ajax。
好的。我更新了答案。我猜你希望页面在更新后重新加载。对吗？
我意识到为什么我需要重新加载页面，因为这条线if($countNT >= 1){ echo $countNT; }，现在它工作正常

【解决方案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

【讨论】：