php实战:html+php+mysql实现留言板功能
2017-06-21 18:16
966 查看
功能描述:
1)实测链接的是远程数据库
2)打开留言板加载留言
3)新添加的留言显示在下方
css代码,用于设置弹框和新添加的留言样式等
js代码,用于加载留言
data.php,用于打开网页时展示留言
comment.php,用于将新的留言存入数据库并展示在视图上
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,用于打开网页时展示留言
<?php include_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,用于将新的留言存入数据库并展示在视图上
<?php include_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;
相关文章推荐
- 利用html+css+mysql+php实现类似google suggest的功能
- PHP+MySQL实现留言板分页功能
- 项目开发实战 jQuery+php+mysql实现数据上传功能
- php+js+mysql+ajax实现简单留言板功能,新手教程
- 项目开发实战 jQuery+php+mysql实现数据上传功能
- 项目开发实战 jQuery+php+mysql实现数据上传功能(补充!!!)
- 基于php&mysql实现聊天室功能的代码实例分享
- 如果编程语言(例如PHP)和SQL(例如MySQL)都能实现某个功能,我们是用编程语言实现还是SQL?
- 使用php 的缓冲区功能和apache的url重写功能实现静态html生成实例
- jQuery(Ajax)/PHP/MySQL实现搜索自动提示功能
- PHP+KINDEDIT+mysql+javascript实现文本编辑和文件上传功能实例
- android+json+php+mysql实现用户反馈功能
- 抢购功能的实现(PHP+MySQL)
- PHP+MySQL实现插入数据功能
- 【转】使用 jQuery(Ajax)/PHP/MySQL实现自动完成功能
- PHP 结合MYSQL简单的实现了Todo List 功能
- php + mysql 实现分表功能【copy】
- PHP+MySQL+jQuery实现贴便签功能
- html表单配合php实现一些简单功能的例子
- PHP+HTML实现页面自考倒计时功能