写在前面：为了防止哪天原贴删除，这里记录一下，原贴：百度经验，原贴中有下载链接，懒得看下边的直接去原贴下载代码
//comment.css
/*html,
body {
background-color: #f0f2fa;
font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
color: #555f77;
-webkit-font-smoothing: antialiased;
}*/
input,
.textarea {
outline: none;
border: none;
display: block;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
font-size: 2rem;
color: #555f77;
}
input::-webkit-input-placeholder,
.textarea::-webkit-input-placeholder {
color: #ced2db;
}
input::-moz-placeholder,
.textarea::-moz-placeholder {
color: #ced2db;
}
input:-moz-placeholder,
.textarea:-moz-placeholder {
color: #ced2db;
}
input:-ms-input-placeholder,
.textarea:-ms-input-placeholder {
color: #ced2db;
}
p {
line-height: 1.3125rem;
}
.comments {
margin: 2.5rem auto 0;
max-width: 60.75rem;
padding: 0 1.25rem;
}
.comment-wrap {
margin-bottom: 1.25rem;
display: table;
width: 90%;
min-height: 5.3125rem;
margin-left: 2rem;
}
.photo {
padding-top: 0.625rem;
display: table-cell;
width: 3.5rem;
position:relative;
left:-2rem;
/*top:150px; */
}
.username{
position:relative;
left:4rem;
top: -2rem;
}
.photo .touxiang {
height: 3.25rem;
width: 3.25rem;
border-radius: 50%;
background-size: contain;
}
.comment-block {
padding: 1rem;
background-color: #fff;
display: table-cell;
vertical-align: top;
border-radius: 0.1875rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
position:relative;
left: 2rem;
top: 4rem;
}
.comment-block textarea {
width: 100%;
max-width: 100%;
}
.comment-text {
line-height: 2.5rem;
margin-bottom: 1.25rem;
font-size: 1.5rem;
}
.bottom-comment {
color: #acb4c2;
font-size: 1rem;
}
.comment-date {
float: left;
}
.comment-actions {
float: right;
}
.comment-actions li {
display: inline;
}
.comment-actions li.complain {
padding-right: 0.625rem;
border-right: 1px solid #e1e5eb;
}
.comment-actions li.reply {
padding-left: 0.625rem;
}
.tab{
margin-top: 5rem;
}
.hr{
color: black;
position:relative;
left: -13rem;
top: 6rem;
}
//config.php数据库连接
<?php
//数据库配置信息(用户名,密码，数据库名)
$db_host = "localhost";//ip
$db_user = "root";//用户名
$db_pwd = "";//密码
$db_name = "ajaxdemo";//数据库名
$mysqli = new mysqli($db_host,$db_user,$db_pwd,$db_name);
if($mysqli->connect_errno != 0) {
echo "数据库连接错误，错误信息：".$mysqli->connect_errno();
exit;
}
$mysqli->query("set names utf8");
?>
//add.php 评论提交后端
<?php
header("Content-type:text/html;charset=utf-8");
include "config.php";
//post接收数据,只是演示效果,这里就省去验证了
$name = $_POST['name'];
$content = $_POST['content'];
$sql = "insert into test (name,content) values ('{$name}','{$content}');";
$res = $mysqli->query($sql);
if($res){
echo '{"name": "'.$name.'","content": "'.$content.'","status": "1"}';
}
?>
<!--index.html-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="comment.css">
<title>AJAX无刷新留言系统</title>
<!--jquery在线库自己找一个，最好用国内的-->
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sub").click(function(){
//只是说明原理,然后这里省去了验证文本框内容的步骤，直接发送ajax请求
$.post("add.php",{name : $("#name").val(), content : $("#content").val()}, function(data){
if(data.status){
//这里是评论之后显示的
var str = "<div style='margin-top:40px;'><div class='comment-block'><p class='comment-text'>"+data.content+"</p><div class='bottom-comment'><div class='comment-date'>2019.3.19</div><ul class='comment-actions'><li class='complain'><a href=''>查看评论</a></li><li class='reply'><a data-toggle='modal' data-target='#exampleModal' data-whatever='2' data-whatevery='3'>回复</a></li></ul></div></div></div>";
$("#show").prepend(str); //在前面追加
}else{
alert("评论失败");
}
}, 'json');
});
});
</script>
</head>
<body>
<div class="col-md-9 col-sm-9 col-xs-9 col-md-offset-0 col-sm-offset-0 col-md-offset-0" style="margin-top:70px;" >
<div class="comment-wrap">
<div class="photo">
<div class="touxiang" style="background-image: url('https://s3.amazonaws.com/uifaces/faces/twitter/dancounsell/128.jpg')"></div>
<div class="username"><p>hello</p></div>
</div>
<div class="comment-block">
<div action="" style="width: 100%;height: 100%;" id="form">
<input type="hidden" name="name" id="name" value="test" />
<textarea name="content" id="content" rows="4" class="textarea" placeholder="Say somthing..." style="margin-left: 0px;"></textarea>
<button id="sub" class="btn btn-primary" style="float:right; margin-right:5px;margin-top: 25px;">提交</button>
</div>
</div>
</div>
</div>
<div id="show">
<?php
include 'config.php';
$sql = 'select * from test;';
$res = $mysqli->query($sql);
while ($row = $res->fetch_array()) {
//从数据库取评论数据
echo "<div style='margin-top:40px;'><div class='comment-block'>
<p class='comment-text'>".$row['content']."</p>
<div class='bottom-comment'>
<div class='comment-date'>2019.3.19</div>
<ul class='comment-actions'>
<li class='complain'><a href=''>查看评论</a></li>
<li class='reply'><a data-toggle='modal' data-target='#exampleModal' data-whatever='2' data-whatevery='3'>回复</a></li>
</ul>
</div>
</div>
</div>";
}
?>
</div>
</body>
</html>