当新数据插入 MySQL 时，AJAX 通知警报弹出或发出声音 - ajax notification alert popup or sound when new data insert into mysql

我有一个向客户销售一些产品的网站。

我想在将

新订单插入 mysql 数据库时弹出警报通知或声音。

我被搜索了几个小时来找到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')");

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.

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

试试这个：

把这个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