php实战：html+php+mysql实现留言板功能

功能描述：

1）实测链接的是远程数据库

2）打开留言板加载留言

3）新添加的留言显示在下方

css代码，用于设置弹框和新添加的留言样式等

        <style type="text/css">            #comments{                margin:10px auto;            }            #post{                margin-top:10px;            }            #comments p,            #post p{                line-height:30px;            }            #comments p span{                margin:4px;                color:#bdb8b8;            }            #message{                position: absolute;                top: 40%;                left: 100px;                width: 200px;                height: 50px;                background: #f2f2f2;                border: 1px solid;                border-radius: 3px;                line-height: 50px;                text-align: center;                display: none;            }        </style>

html代码：

            <div>                <div id="post">                    <h3>文章评论</h3>                    <p>昵称：</p>                    <p><input type="text" class="input" id="user" /></p>                    <p>评论内容：</p>                    <p><textarea class="input" id="txt" style="width:100%; height:80px"></textarea></p>                    <p><input type="submit" class='btn'value="发表" id="add" /></p>                    <div id="message"></div>                </div>                <div id="comments"></div>            </div>

js代码，用于加载留言

        <script type="text/javascript" src="js/jquery.js"></script>         <script type="text/javascript">            $(function() {                var comments = $("#comments");                $.getJSON("data.php", function(json) {                    $.each(json, function(index, array) {                        var txt = "<p><strong>" + array["user"] + "</strong>：" + array["comment"] + "<span>" + array["addtime"] + "</span></p>";                        comments.append(txt);                    });                });                //将评论的内容展出                $("#add").click(function() {                    var user = $("#user").val();                    var txt = $("#txt").val();                    $.ajax({                        type: "POST",                        url: "comment.php",                        data: "user=" + user + "&txt=" + txt,                        dataType : 'JSON',                        success: function(res) {                            if (res.code == 1) {                                var str = "<p><strong>" + res.user + "</strong>：" + res.txt + "<span>刚刚</span></p>";                                comments.append(str);                                $("#message").show().html("发表成功！").fadeOut(1000);                                $("#txt").attr("value", "");                            } else {                                $("#message").show().html(res.message).fadeOut(1000);                            }                        }                    });                });            });        </script>

connect.php文件，用于连接数据库

<?php$host="your db host";$db_user="your db";$db_pass="your db password";$db_name="your db name";$timezone="Asia/Shanghai";$link=mysqli_connect($host,$db_user,$db_pass);//连接数据库主机mysqli_select_db($link,$db_name);//选择数据库mysqli_query($link,"SET names UTF8");//设置数据库编码格式header("Content-Type: text/html; charset=utf-8");//设置头部样式date_default_timezone_set($timezone); //北京时间

data.php,用于打开网页时展示留言

<?phpinclude_once("connect.php");//连接数据库$q=mysqli_query($link,"select * from comments");//获取数据库的数据while($row=mysqli_fetch_array($q)){$comments[] = array("id"=>$row['id'],"user"=>$row['user'],"comment"=>$row['comment'],"addtime"=>$row['addtime']);}echo json_encode($comments);//以json格式编码

comment.php，用于将新的留言存入数据库并展示在视图上

<?phpinclude_once("connect.php");//trim,返回字符串 str  去除首尾空白字符后的结果。如果不指定第二个参数,则去除普通控制，制表符，换行符，回车符，空字节符，垂直制表符//htmlspecialchars() 函数把预定义的字符转换为 HTML 实体$user = htmlspecialchars(trim($_POST['user']));$txt = htmlspecialchars(trim($_POST['txt']));if(empty($user)){    $data = array("code"=>355,"message"=>"昵称不能为空！");    echo json_encode($data);    exit;}if(empty($txt)){    $data = array("code"=>356,"message"=>"内容不能为空");    echo json_encode($data);    exit;}$time = date("Y-m-d H:i:s");$query=mysqli_query($link,"insert into comments(user,comment,addtime)values('$user','$txt','$time')");if($query)  {    $data = array("code" => 1, "message"=>"success","user" => $user , "txt" => $txt);    echo json_encode($data);}

另外，还有在数据库中创建comment的sql命令

CREATE TABLE `comments`(`id` int(4) NOT NULL AUTO_INCREMENT PRIMARY KEY,`user` varchar(50),`comment` varchar(200),`addtime` datetime not null)engine=MYISAM CHARACTER SET UTF8 COLLATE utf8_unicode_ci;