跟着咖啡学习php(三)---留言板设计

最新推荐文章于 2022-01-04 10:43:23 发布

等不回天亮等时光

最新推荐文章于 2022-01-04 10:43:23 发布

阅读量346

点赞数

分类专栏： php jquery

本文链接：https://blog.csdn.net/Only_ruiwen/article/details/81239028

版权

php 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

jquery

5 篇文章 0 订阅

订阅专栏

留言板在我们个人博客比较常见的一个版块。那么我们今天就来做一下这版块的功能和设计。
我们使用jquery+bootstrap做前台界面搭建和业务逻辑编写。
liuyan.php

<?php

?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script src="js/jquery-1.11.0.js"></script>
        <style>
            textarea{
                resize: none;
                width: 500px;
                height: 120px;
            }
            .main{
                padding: 10px 15px;
            }
            .main .article{
                width: 500px;
                border: 1px solid #ddd;
                word-break: break-all;
                padding: 10px;
                border-radius: 4px;
                margin-bottom: 20px;
            }
            .main .article .article_footer{
                height: 30px;
                line-height: 30px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <form>
                <div class="form-group">
                     <textarea class="form-control say" placeholder="请说点什么吧..." id="con"></textarea>
                </div>
                <div class="form-group">
                     <button class="btn btn-danger" type="button" id="send">发送</button>
                </div>
            </form>
            <hr />

            <div class="main">


            </div>

        </div>
        <script>
            $(function(){

                $.ajax({
                    type:"get",
                    url:"model/getMore.php",
                    success:function(res){
                        var data = JSON.parse(res)
                        var str = ""
                        var time = getTime()
                        console.log(data)
                        for (var i=0;i<data.length;i++) {
                            str+='<div class="article"><p>'+data[i].sign_con+'</p><div class="article_footer"><span class="time">'+time+'</span></div></div>'
                        }
                        $(".main").append(str)
                    }
                })



                $("#send").click(function(){
                    var con = $("#con").val()
                    if(con.length==0){
                        alert("请输入点东西吧~")
                    }else{
                        $.ajax({
                            type:"post",
                            url:"model/add.php",
                            data:{
                                con:con
                            },
                            async:true,
                            success:function(res){
                                var data = JSON.parse(res)
                                    if(data.code==1){
                                        var time = getTime()
                                        var str = '<div class="article"><p>'+con+'</p><div class="article_footer"><span class="time">'+time+'</span></div></div>'
                                        $(".main").append(str)
                                        $("#con").val("")
                                    }
                            }
                        })
                    }


                })

                function getTime(){
                    var str = ""
                    var now = new Date()
                    var year = now.getFullYear()
                    var month = now.getMonth()
                    var oDate = now.getDate()

                    var oHour = now.getHours()
                    var oMin = now.getMinutes()
                    var oSec = now.getSeconds()
                    str = year+"-"+zero(month)+"-"+zero(oDate)+":"+zero(oHour)+":"+zero(oMin)+":"+zero(oSec)
                    return str
                }


                function zero(str){
                    return str>9?str:"0"+str
                }


            })

        </script>
    </body>
</html>

添加功能 add.php

<?php
    $conn = mysqli_connect("localhost","root","","shop");
    if(!$conn){
        echo "数据库连接失败";
    }
    mysqli_query($conn,"set names utf8");

    $con = $_POST["con"];
    $time = date("Y-m-d h:i:s",time());
    $sql = "insert into sign (sign_con, sign_time) values ('$con','$time')";
    $res = mysqli_query($conn,$sql) or die("失败了");

    if($res){
        $data = array("code"=>1,"message"=>"数据插入成功");
        echo json_encode($data);
        exit;
    }else{
        $data = array("code"=>2,"message"=>"数据插入失败");
        echo json_encode($data);
        exit;
    }

?>

获取数据,getMore.php

<?php
    $conn = mysqli_connect("localhost","root","","shop");
    if(!$conn){
        echo "数据库连接失败";
    }
    mysqli_query($conn,"set names utf8");

    $con = $_POST["con"];
    $time = date("Y-m-d h:i:s",time());
    $sql = "insert into sign (sign_con, sign_time) values ('$con','$time')";
    $res = mysqli_query($conn,$sql) or die("失败了");

    if($res){
        $data = array("code"=>1,"message"=>"数据插入成功");
        echo json_encode($data);
        exit;
    }else{
        $data = array("code"=>2,"message"=>"数据插入失败");
        echo json_encode($data);
        exit;
    }

?>

等不回天亮等时光

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跟着咖啡学习php(三)---留言板设计

留言板在我们个人博客比较常见的一个版块。那么我们今天就来做一下这版块的功能和设计。我们使用jquery+bootstrap做前台界面搭建和业务逻辑编写。 liuyan.php&lt;?php?&gt;&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
复制链接

扫一扫