• PHP自己的框架留言板功能实现

    目录

    1、实现留言板功能效果

     2、创建留言板数据表

    3、控制器提交和显示方法 

    4、提交留言板html 

    5、留言板列表html  

     

    1、实现留言板功能效果

     2、创建留言板数据表
    1. CREATE TABLE `msg` (
    2.   `id` int(11) NOT NULL AUTO_INCREMENT,
    3.   `name` varchar(30) DEFAULT NULL COMMENT '留言板姓名',
    4.   `text` varchar(100) DEFAULT NULL COMMENT '留言板内容',
    5.   `time` varchar(30) DEFAULT NULL COMMENT '添加时间',
    6.   PRIMARY KEY (`id`)
    7. ) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
    8.
    3、控制器提交和显示方法 
    2. class indexCrl extends  CrlBase {
    3.     //留言板提交功能
    4.     public function index(){
    5.         if($_SERVER['REQUEST_METHOD'] == 'POST'){
    6.             if($_POST['name'] && $_POST['text']){
    7.                 $data=[
    8.                     "name"=>$_POST['name'],
    9.                     "text"=>$_POST['text'],
    10.                     "time"=>date("Y-m-d H:i:s")
    11.                 ];
    12.  
    13.                 $res=  table("msg")->insert($data);
    14.                 if($res){
    15.                     echo json_encode(['status'=>1]);exit;
    16.                 }
    17.             }
    18.             echo json_encode(['status'=>0]);exit;
    19.         }else{
    20.             $this->display();
    21.         }
    22.     }
    23.     //留言板列表
    24.     public function lst(){
    25.         $data=  table("msg")->select();
    26.         $this->assign('data',$data);
    27.         $this->display();
    28.     }
    29.  
    30. }
    31.
    4、提交留言板html 
    1.  
    2. <meta charset="UTF-8">
    3. html>
    4. <html>
    5. <head>
    6.     <title>留言板title>
    7. head>
    8. <body>
    9. <h1>留言板h1>
    11. <form id="message-form">
    12.     <label for="name">姓名：label>
    13.     <input type="text" id="name" required><br><br>
    14.  
    15.     <label for="message">留言内容：label><br>
    16.     <textarea id="message" required>textarea><br><br>
    17.  
    18.     <button type="submit">提交留言button>
    19. form>
    21. <div id="message-list">div>
    22. <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js">script>
    23. <script>
    24.     // 当表单提交时
    25.     document.getElementById("message-form").addEventListener("submit", function(e) {
    26.         e.preventDefault(); // 阻止表单默认的提交行为
    27.         // 获取用户输入的姓名和留言内容
    28.         var name = document.getElementById("name").value;
    29.         var message = document.getElementById("message").value;
    30.  
    31.         $.ajax({
    32.             dataType: 'json',
    33.             type: 'POST',
    34.             url: '',
    35.             data: {
    36.                 name: name,
    37.                 text: message
    38.             },
    39.             success: function (json) {
    40.                 if(json.status==1){
    41.                     alert('提交成功');
    42.                     // 创建一个新的留言元素
    43.                     var newMessage = document.createElement("div");
    44.                     newMessage.innerHTML = "" + name + "：" + message;
    45.                     // 将新留言添加到留言列表中
    46.                     document.getElementById("message-list").appendChild(newMessage);
    47.                     // 清空表单输入
    48.                     document.getElementById("name").value = "";
    49.                     document.getElementById("message").value = "";
    50.                 }else{
    51.                     alert('提交失败');
    52.                 }
    53.             },
    54.             error: function (jqXHR, textStatus, errorThrown) {
    55.                 alert('系统错误');
    56.             }
    57.         });
    58.  
    59.  
    60.  
    61.     });
    62. script>
    63. body>
    64. html>
    5、留言板列表html  
    1.  
    2. html>
    3. <html>
    4. <head>
    5.     <title>留言板title>
    6.     <style>
    7.         table {
    8.             border-collapse: collapse;
    9.             width: 100%;
    10.         }
    11.  
    12.         th, td {
    13.             padding: 8px;
    14.             text-align: left;
    15.             border-bottom: 1px solid #ddd;
    16.         }
    17.  
    18.         th {
    19.             background-color: #f2f2f2;
    20.         }
    21.     style>
    22. head>
    23. <body>
    24. <h1>留言板h1>
    25.  
    27. <table id="message-table">
    28.  
    29.     <tr>
    30.         <th>姓名th>
    31.         <th>留言内容th>
    32.         <th>时间th>
    33.     tr>
    34.  
    35.     {foreach $data as $key=>$item}
    36.     <tr>
    37.         <td>{$item['name']}td>
    38.         <td>{$item['text']}td>
    39.         <td>{$item['time']}td>
    40.     tr>
    41.     {/foreach}
    42.  
    43. table>
    44. body>
    45. html>

  • 相关阅读:
    Java中去掉字符串中的非中文字符
    正确使用自旋锁、互斥锁
    mac如何在item2中展示git分支
    Navicat向mysql数据库中导入sql文件常见报错问题总结及解决办法
    对自动化测试的一些展望与理解
    AES和SM4各有什么特点？有什么不同之处？
    PyTorch实现苹果M1芯片GPU加速：训练速度提升7倍，性能最高提升21倍
    redis---分布式锁存在的问题及解决方案（Redisson）
    在CentOS7上增加swap空间
    开源模型应用落地-qwen2模型小试-入门篇（六）
  • 原文地址：https://blog.csdn.net/weixin_39934453/article/details/132719929