通知系統jQuery的，PHP和MySQL

我想開發一個通知系統使用jQuery和PHP。因此，我在數據庫中創建了一個新表格，用於存儲所有新通知。使用jquery，我已經能夠顯示一個警告（氣泡圖標）顯示添加到數據庫中的新行數，但我現在卡住了，因爲我不知道如何更新數據庫（fire update.ph文件）當我點擊圖標（.icon-bell）時，它會激活一個下拉菜單。通知系統jQuery的，PHP和MySQL

您的幫助球員非常感謝：slight_smile：

這是jQuery腳本我已經添加到索引頁面

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

這是在索引頁

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

html代碼

這是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(); 
?>

來源

2017-01-07 pippo

查看EventSource。它沒有完全支持，但完成這項任務。 – Nitin

您可以使用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>

您還需要從數據庫中獲取的所有記錄和更新通知viewd狀態。創建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); 
} 
?>

現在，你將能夠看到這樣的導航欄上的通知：

當您單擊下拉的狀態意見通知將更新並計數將消失。

來源

2017-07-04 14:15:36

異步執行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輸出的數據。

來源

2017-01-07 08:11:17 bnahin

你好，非常感謝你的回答。我剛開始學習ajax。我真的不明白我如何使用你的代碼:(你能給我一些更多的幫助嗎？當我點擊工具提示時我需要激發文件update.php – pippo

使用ajax執行PHP查詢，以便它們可以在沒有頁面重新加載的情況下實時執行。

來源

2017-01-07 08:30:03 Neville

，所以我已經成功地創建了JavaScript代碼和它似乎做工精細

<script type="text/javascript"> 

$(document).ready(function(){ 

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

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

}); 

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

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

}); 
</script>

現在我已經得到了唯一的問題是隱藏的泡沫與#datacount如果在數據庫中沒有記錄。有人有任何想法嗎？

來源

2017-01-07 14:25:33 pippo

通知系統jQuery的，PHP和MySQL

回答

相關問題