Question

我正在尝试使用jQuery和PHP开发通知系统。所以我在数据库中创建了一个新表，我将存储所有新通知。使用jQuery我已经能够显示一个警告（气泡图标），显示添加到数据库中的新行数，但我现在卡住了，因为我真的不知道如何更新数据库（fire update.php文件）当我点击激活下拉菜单的图标（.icon-bell）时。

这是我已添加到索引页面的jQuery脚本

<script type="text/javascript">
    $(document).ready(function(){
        $("#datacount").load("select.php");
        setInterval(function(){
            $("#datacount").load('select.php')
        }, 20000);
    });
</script>

这是索引页面中的HTML代码

<li class="dropdown dropdown-extended dropdown-notification dropdown-dark" id="header_notification_bar">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
        <i class="icon-bell">
        </i>
        <span class="badge badge-success"><div id="datacount">
            </div>
        </span>
    </a>
    <ul class="dropdown-menu" >
        <li class="external">
            <h3>
                <span class="bold">12 pending</span>
                notifications
            </h3>
            <a href="page_user_profile_1.html">view all</a>
        </li>
        <li>
            <ul class="dropdown-menu-list scroller" style="height: 250px;" data-handle-color="#637283">
                <li>
                    <a href="javascript:;">
                        <span class="time">just now</span>
                        <span class="details">
                            <span class="label label-sm label-icon label-success">
                                <i class="fa fa-plus">
                                </i>
                            </span> New user registered. </span>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</li>

这是select.php文件

<?php
$sql = "SELECT * from tbl_noti where status = 'unread'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$count = $result->num_rows;
echo $count;
$conn->close();
?>

这是update.php文件

<?php
$sql = "update tbl_noti set status = 'read'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$count = $result->num_rows;
echo $count;
$conn->close();
?>

Answer 1

您可以使用PHP + Ajax来完成此任务。我创建了一个简单的通知系统，您可以轻松地从GitHub（https://github.com/shahroznawaz/php-notifications）克隆它。

让我们创建一个index.php文件并输入以下代码。它会创建一个表单。所有数据都将通过ajax调用获得并在视图中更新。

<!DOCTYPE html>

<html>

<head>

 <title>Notification using PHP Ajax Bootstrap</title>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

 <br /><br />

 <div class="container">

  <nav class="navbar navbar-inverse">

   <div class="container-fluid">

    <div class="navbar-header">

     <a class="navbar-brand" href="#">PHP Notification Tutorial</a>

    </div>

    <ul class="nav navbar-nav navbar-right">

     <li class="dropdown">

      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="label label-pill label-danger count" style="border-radius:10px;"></span> <span class="glyphicon glyphicon-bell" style="font-size:18px;"></span></a>

      <ul class="dropdown-menu"></ul>

     </li>

    </ul>

   </div>

  </nav>

  <br />

  <form method="post" id="comment_form">

   <div class="form-group">

    <label>Enter Subject</label>

    <input type="text" name="subject" id="subject" class="form-control">

   </div>

   <div class="form-group">

    <label>Enter Comment</label>

    <textarea name="comment" id="comment" class="form-control" rows="5"></textarea>

   </div>

   <div class="form-group">

    <input type="submit" name="post" id="post" class="btn btn-info" value="Post" />

   </div>

  </form>


 </div>

</body>

</html>

现在创建像这样的ajax调用：

<script>

$(document).ready(function(){

// updating the view with notifications using ajax

function load_unseen_notification(view = '')

{

 $.ajax({

  url:"fetch.php",
  method:"POST",
  data:{view:view},
  dataType:"json",
  success:function(data)

  {

   $('.dropdown-menu').html(data.notification);

   if(data.unseen_notification > 0)
   {
    $('.count').html(data.unseen_notification);
   }

  }

 });

}

load_unseen_notification();

// submit form and get new records

$('#comment_form').on('submit', function(event){
 event.preventDefault();

 if($('#subject').val() != '' && $('#comment').val() != '')

 {

  var form_data = $(this).serialize();

  $.ajax({

   url:"insert.php",
   method:"POST",
   data:form_data,
   success:function(data)

   {

    $('#comment_form')[0].reset();
    load_unseen_notification();

   }

  });

 }

 else

 {
  alert("Both Fields are Required");
 }

});

// load new notifications

$(document).on('click', '.dropdown-toggle', function(){

 $('.count').html('');

 load_unseen_notification('yes');

});

setInterval(function(){

 load_unseen_notification();;

}, 5000);

});

</script>

您还需要从数据库中获取所有记录并更新已查看通知的状态。创建fetch.php文件并添加以下代码：

<?php

include('connect.php');

if(isset($_POST['view'])){

// $con = mysqli_connect("localhost", "root", "", "notif");

if($_POST["view"] != '')

{
   $update_query = "UPDATE comments SET comment_status = 1 WHERE comment_status=0";
   mysqli_query($con, $update_query);
}

$query = "SELECT * FROM comments ORDER BY comment_id DESC LIMIT 5";
$result = mysqli_query($con, $query);
$output = '';

if(mysqli_num_rows($result) > 0)
{

while($row = mysqli_fetch_array($result))

{

  $output .= '
  <li>
  <a href="#">
  <strong>'.$row["comment_subject"].'</strong><br />
  <small><em>'.$row["comment_text"].'</em></small>
  </a>
  </li>

  ';
}
}

else{
    $output .= '<li><a href="#" class="text-bold text-italic">No Noti Found</a></li>';
}

$status_query = "SELECT * FROM comments WHERE comment_status=0";
$result_query = mysqli_query($con, $status_query);
$count = mysqli_num_rows($result_query);

$data = array(
   'notification' => $output,
   'unseen_notification'  => $count
);

echo json_encode($data);
}
?>

现在，您将能够在导航栏中看到如下通知：

单击下拉列表时，视图通知状态将更新，计数将消失。

Answer 2

要异步执行PHP，您需要使用AJAX。 jQuery有一些用于此目的的函数。

$.ajax：完全可自定义的异步请求，包括错误处理，标题等。

$.post：AJAX仅限于POST。

$.get：AJAX仅限于GET。

$.post和$.get都可以使用$.ajax完成，但在大多数情况下，它们更容易使用。在这种情况下，您很可能只需要$.get，因为请求中没有传递其他数据。

示例代码：

$.get(
  "update.php",
  function(result) {
    console.log(result)
  }
);

此处，result是从update.php输出的数据。

Answer 3

使用ajax执行PHP查询，以便它们可以实时执行而无需重新加载页面。

通知系统jQuery，PHP和MySQL

3 个答案: