个人中心
gpt4 book ai didi

php - 通知系统 jQuery、PHP 和 MySQL

转载 作者：行者123 更新时间：2023-12-01 07:06:38 25 4
gpt4 key购买 nike

我正在尝试使用 jQuery 和 PHP 开发一个通知系统。因此，我在数据库中创建了一个新表，用于存储所有新通知。使用 jQuery 我已经能够显示一个警报(气泡图标)，显示添加到数据库的新行数，但我现在陷入困境，因为我真的不知道如何更新数据库(触发 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();
?>

最佳答案

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

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

<!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);
}
?>

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

enter image description here

当您单击下拉菜单时， View 通知的状态将更新并且计数将消失。

enter image description here

关于php - 通知系统 jQuery、PHP 和 MySQL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41518873/

25 4 0
文章推荐： Cygwin 相当于 Linux/dev/sda、/dev/sdb 等
文章推荐： sql-server - 列出 SQL Server 2014 中的数据库和表空间
文章推荐： plsql - 如何在 Oracle SQL 中更新作业中的参数
文章推荐： 由于使用分页按钮，extjs 为网格传递额外参数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com