首先创建消息表，其主要字段有发送者的名称，消息内容，以及消息发送时间；
然后在前端创建表单并将留言消息查询出来，进行列表展示，index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> <form action="./send_message.php" method="POST"> <input type="text" name="sender" placeholder="你的昵称"><br> <textarea rows="5" cols="22" name="content" placeholder="留言内容"></textarea> <br> <button type="submit">发送</button> </form> <table id="list" border="1" cellspacing="0" style="margin-top:20px;"> <tr> <th>ID</th> <th>Name</th> <th>Sender</th> <th class="content">Content</th> <th>操作</th> </tr> <table> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.js"></script> <script> $.get('/test/main.php',function(data){ data = JSON.parse(data).data; var html = ''; $(data).each(function(index,item){ html+= ` <tr> <td>${item.id}</td> <td>${item.sender}</td> <td>${item.content}</td> <td>${item.send_time}</td> <td> <a href="./update.php?id=${item.id}">修改</a> <a href="./del.php?id=${item.id}">删除</a> </td> </tr> `; }); $('#list').append(html); }); </script> </body> </html>
将表单提交过来的信息保存到数据库，send_message.php
<?php $send_time = time(); $sender = $_POST['sender']; $content = $_POST['content']; $con = mysqli_connect('localhost','root','123456'); if(!$con){ die('数据库连接失败').mysqli_error(); } mysqli_select_db($con,'test'); mysqli_query('set names utf8'); $sql = "insert into message(sender,content,send_time) values('$sender','$content','$send_time')"; $res = mysqli_query($con,$sql); if($res){ echo '<script>alert("留言成功");window.location.href="index.html";</script>'; }else{ echo '<script>alert("留言失败");window.location.href="index.html";</script>'; }
从数据库读取数据，并返回json，main.php
<?php $con = mysqli_connect('localhost','root','123456'); if(!$con){ die('数据库连接失败').mysqli_error(); } mysqli_select_db($con,'test'); mysqli_query('set names utf8'); $sql = 'select * from message'; $res = mysqli_query($con,$sql); $arr = []; while($row = mysqli_fetch_array($res,MYSQLI_ASSOC)){ $row['send_time'] = date('Y-m-d H:i:s',$row['send_time']); $arr[] = $row; } if(isset($res)){ echo json_encode(array( 'code'=>0, 'msg'=>'ok', 'data'=>$arr )); }else{ echo json_encode(array( 'code'=>0, 'msg'=>'聊天信息为空' )); } ?>
效果如下：
