时间戳

首页 > 解决方案 > 如何使用 ajax 和 php 从数据库中获取消息

javascript - 如何使用 ajax 和 php 从数据库中获取消息

问题描述

我有一个简单的 PHP 消息传递系统，我可以在不刷新页面的情况下将消息发送到数据库，但是，我还想使用 ajax、jquery 或任何其他方法立即显示已经发送到数据库的消息。（发送方和接收方双方）

我的HTML：

<form action="" method="post">
   <input autofocus autocomplete="off" name="typed_msg" id="typed_msg" >
   <input type="button" name="submit" id="submit" value="Go" class="btn btn-success">
</form>

我的 JS 代码：

<script>
 $(document).ready(function(){  
      $('#submit').click(function(){  
           var typed_msg = $('#typed_msg').val();
           var receiver_id = $('#receiver_id').val();
           if(typed_msg == '')  
           {  
                $('#error_msg').html("Message blank!");  
           }  
           else  
           {  
                $('#error_msg').html('');  
                $.ajax({  
                     url:"msg.php",  
                     method:'post',  
                     data:{typed_msg:typed_msg, receiver_id:receiver_id},  
                     success:function(data){  
                          $("form").trigger("reset");  
                          $('#succ_msg').fadeIn().html(data);  
                          setTimeout(function(){  
                               $('#success_message').fadeOut("Slow");  
                          }, 2000);  
                     }  
                });  
           }  
      });  
 });

 </script>

消息显示代码：

<ul style="list-style:none;width:90%">
<li>
<p>
      <?php
      if($msg_senderID == $_SESSION['id']){?>
         <img src="media/<?php echo $userProfileImg;?>" alt="" style="position:absolute;right:0;margin-top:-5px;margin-left:-70px;">
    <?php      
      } else {?>
         <img src="media/<?php echo $senderImg;?>" alt="" style="margin-top:-5px;margin-left:-70px;">
    <?php
      } 
       
       ?> <?php echo $msg_body;?>
</p>
</li>
</ul>

标签： javascriptphpjquerydatabase

解决方案

对于双向消息传递，Web Sockets 是最合适的。

试试socket.io：https://socket.io/

它是 PHP 的替代方案：https ://github.com/walkor/phpsocket.io

您需要将第一个用于客户端，因为它在 JS 中，而第二个用于服务器端。首先在服务器端创建套接字并将客户端连接到同一端口。查看 socket.io 的 Hello World 版本。

推荐阅读