當新數據插入 mysql 時，ajax 通知警報彈出或聲音

Question

我有一個網站，向客戶銷售一些產品。

我想在將新訂單插入 mysql db 時彈出警報通知或發出聲音。

我搜索了幾個小時以找到 ajax 的解決方案，但我是 ajax 實現的新手，現在卡住了。

如果我只能收到通知，我不需要復雜的方法，這對我來說沒問題。

如果有人給我提示或更詳細的參考或指南......非常感謝！

這是mysql插入查詢：

$result2 = mysqli_query($con, "INSERT into user (emailPrefix,password1,address,address2,orderRnd,dateEmail,name5,phone, date) 
              VALUES  ('$emailPrefix','$password1','$address','$address2','$orderRnd','$dateEmail','$name5','$phone','$date')");

Answer 1

ajax.js
var interval = setInterval( function() {
    $.ajax ({
        url: "user.php",
        success: function(data) {
            $("#users").html(data);
        }
    });
}, 3000);

Above syntax refreshes pages every 3 seconds. You can compare old id of table in   every 3 seconds. If new id is there eventually its new inserted values. So popup like below

 $result2 = mysqli_query($con, "SELECT id FROM user ORDER BY id ASC");
 while($rows = mysqli_fetch_assoc($result2)) {
          $NEW_id = $rows["id"];
 }

if($NEW_id > $_SESSION["OLD_id"]) {

    $_SESSION["destination_OLD"] = $id_flexi;

    echo '<audio controls="controls" autoplay>
                   <source src="beep.wav" type="audio/wav">
                   <embed src="beep.wav">
                   Your browser is not supporting audio
          </audio>';
 }

 I have same problem as yours and this is my solutions. Experts recommend other things but I have only this much knowledge.

 Good day.

Answer 2

if($result2){
    echo '<script type="text/javascript">alert("' . $msg . '")</script>';
} // define $msg as you like

Answer 3

嘗試這個：

將此 html 音頻標簽和模態放在您想要發出嗶聲的頁面上。

<audio id="playMusic" playcount="2">
<source src="https://media.geeksforgeeks.org/wp-content/uploads/20190531135120/beep.mp3" type="audio/mpeg">
</audio>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" onclick="javascript:window.location='dashboard.php?page=5'">&times;</button>
        <h4 class="modal-title"><i class="fas fa-bell" ></i> Incoming Order!</h4>
      </div>
      <div class="modal-body">
        <p>Find out the new order by: <a href="dashboard.php?page=5" class="text-info" >Click Here!</a></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="javascript:window.location='dashboard.php?page=5'">Take me there!</button>
      </div>
    </div>

  </div>
</div>

JS

js 代碼會從 php 頁面獲取新訂單的數量，看看是否有新訂單。

var old_count = 0;   
        var i = 0;
        setInterval(function(){    
        $.ajax({
            type : "POST",
            url : "<?php echo 'folder/count_new_order.php'; ?>",
            success : function(data)
            {
                if (data > old_count)
                 {

                        if (i == 0)
                        {old_count = data;} 
                        else
                        {
                                $(document).ready(function() {
                                    $("#playMusic").get(0).play();
                                });

                                $("#myModal").modal("show").on("shown", function () {
                                    window.setTimeout(function () {
                                        $("#myModal").modal("hide");                                            
                                    }, 1000);
                                });
                        
                        old_count = data;

                        }

                } i=1;
            }
        });
        },500);

count_new_order.php

例如，該表已有 12 行。

include('config.php'); //db connection

$sql = "SELECT count(*) as count FROM table";
$qry = mysqli_query($conn,$sql);
$rowq = mysqli_fetch_assoc($qry);
echo $rowq['count']; // output: 12