从网上找到一个能实现简单comment功能的教程，有See Demo可以提前预览效果，而且作者也很贴心地在网页下方公布了完整的code, 所以我最终决定使用这个教程。
网址：http://talkerscode.com/webtricks/simple-instant-comment-system-using-ajax.php
这个实时评论功能使用到Ajax、PHP 和 MySQL 三部分知识。在前一个有关 XAMPP 的教程的基础上，我对 PHP 和 MySQL 有了一点了解，至于 Ajax 我是完全不了解，基础功不扎实导致即使拷贝下程序放到 IDE 中编译，也遇到各种各样的问题。
我不是一个会看参考书的人，我学知识都是基于自己的兴趣，然后再借助网络的力量，遇到不懂的就问
google 老师（至于为什么不问度娘？我总是找不到答案），循序渐进地把各个知识点补全。
在这样一个看似都准备好一切，只需轻点“运行”按钮，就可以看到结果的程序，我也花费了一些时间去调试。原因在我看来，有以下几点：
- 编译环境不同
- 文件放置路径不同
- 语法过时，需要更新
图一
在编译过程中，我遇到了许多障碍，现在我把遇到的问题和解决方法总结下来，希望可以为使用这份教程的学友提供帮助。
问题一：comments.php 文件无法引用 comment_style.css 文件。后来发现是路径需要修改。
问题一参考资料：
https://segmentfault.com/q/1010000004438063/a-1020000004438890
问题二：缺少显示已有评论内容部分。
图二
考虑出现这样的问题，可能是由于我使用的编译环境不能完整显示代码的初衷，或者部分代码已过时，需要进一步更新。于是我选择一步步调试程序，找到问题所在。我使用的编译工具是 Brackets, 可在Extension Manager 中下载 PHP Debugger 插件。安装插件的过程参见：https://www.youtube.com/watch?v=ejbWCxpejhI
我在安装 PHP Debugger 过程中遇到了一点小麻烦，就是 php.ini 文件中缺失 xdebug 部分，因此无法对其进行修改。在大量查阅网上资料后，我认定我下载的 XAMPP 版本可能取消了 xdebug， 我试了下 XAMPP for Windows 5.6.12 版本 xdebug 可用。但是这个版本的Apache 会与 xdebug 的 port 冲突，需要响应进行修改。
问题二参考资料：
安装 xdebug
http://stackoverflow.com/questions/41368941/xdebug-configuration-missing-from-php-ini-in-xampp
https://gist.github.com/odan/1abe76d373a9cbb15bed
https://netbeans.org/kb/docs/php/configure-php-environment-windows_zh_CN.html
https://community.apachefriends.org/viewtopic.php?p=249717&sid=10911a8aaef96ea15b541060b9d47e2c
修改 Apache 配置
http://stackoverflow.com/questions/18300377/xampp-apache-error-apache-shutdown-unexpectedly
问题三：调试后发现 mysql_query() 函数没有起到查询数据库的作用，于是选择用 PDO 代替。
问题三参考资料：
http://stackoverflow.com/questions/21353448/how-to-do-mysql-query-to-pdo
问题四： 修改自闭合script标签
问题三参考资料：https://www.zhihu.com/question/36774461
问题五： 注意 $.ajax() 方法中的 URL 路径
问题五参考资料：
https://openenergymonitor.org/forum-archive/node/107.html
综上所述，我把修改好的 code 贴出来，学友们可在此基础上自由发挥！
步骤一：建立数据库存储 comment 内容，方便调取和查找。
CREATE DATABASE `testdb`;
USE `testdb`;
CREATE TABLE IF NOT EXISTS `users` (
`id` int(8) NOT NULL AUTO_INCREMENT,
`name` varchar(30) NOT NULL,
`email` varchar(60) NOT NULL,
`password` varchar(40) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `email` (`email`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
步骤二：建立 PHP 文件，程序从这里开始运行。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../test/css/comment_style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function post() {
var comment = document.forms["myForm"]["fcomment"].value
var name = document.forms["myForm"]["fname"].value
if (comment && name) {
$.ajax({
url: 'post_comments.php',
type: 'post',
// dataType:'json',
data: {
user_comm: comment,
user_name: name
},
success: function(response) {
document.getElementById("all_comments").innerHTML = response + document.getElementById("all_comments").innerHTML;
document.getElementById("comment").value = "";
document.getElementById("username").value = "";
}
});
}
}
</script>
<!--
<script>
function post()
{
var comment = document.getElementById("comment").value;
var name = document.getElementById("username").value;
if(comment && name)
{
alert("Name must be filled out");
};
}
</script>
-->
</head>
<body>
<div class="col-md-12 colcol">
<h1>Instant Comment System Using Ajax,PHP and MySQL</h1>
<form name="myForm" method="post" action="" onsubmit="return post()">
<textarea id="comment" name="fcomment" placeholder="Write Your Comment Here....."></textarea>
<br>
<input type="text" id="username" name="fname" placeholder="Your Name">
<br>
<input id="submit" type="submit" value="Post Comment">
</form>
<div id="all_comments">
<?php
$host="localhost";
$username="root";
$password="";
$databasename="testdb";
// $connect=mysql_connect($host,$username,$password);
// if (!$connect) {
// die('Not connected : ' . mysql_error());
//}
// $db=mysql_select_db("testdb");
// if (!$db) {
// die ('Can\'t use testdb : ' . mysql_error());
//}
// $comm = mysql_query('SELECT name FROM `comments`');
$dbo = new PDO("mysql:host=localhost;dbname=testdb", "root", "");
// Construct a query
$query = "SELECT * FROM comments";
// Send the query
$qresult = $dbo->query($query);
while($row = $qresult->fetch(PDO::FETCH_ASSOC)) {
//$result[] = $row;
$name=$row['name'];
$comment=$row['comment'];
$time=$row['post_time'];
?>
<div class="comment_div">
<p class="name">Posted By:
<?php echo $name;?>
</p>
<p class="comment">
<?php echo $comment;?>
</p>
<p class="time">
<?php echo $time;?>
</p>
</div>
<?php
}
// Free used resources
$qresult->closeCursor();
$dbo = null;
?>
</div>
</div>
</body>
</html>
步骤三：建立执行存储 comment 的 PHP 文件，便于步骤二的 $.ajax() 方法使用。
<?php
$host="localhost";
$username="root";
$password="";
$databasename="testdb";
$link = new PDO("mysql:host=localhost;dbname=testdb", "root", "");
if (!$link) {
die('Not connected : ' . mysql_error());
}
if(isset($_POST['user_comm']) && isset($_POST['user_name']) )
{
$statement = $link->prepare("INSERT INTO comments(name, comment, post_time)VALUES(:name,:comment, CURRENT_TIMESTAMP)");
$statement->bindParam(':name',$_POST['user_name']);
$statement->bindParam(':comment',$_POST['user_comm']);
$statement->execute();
}
// Step 5: Free used resources
//$statement->closeCursor();
//$link = null;
?>
步骤四：创建 CSS 文件，为网页“化个妆”。
body
{
text-align:center;
font-family:helvetica;
background-color:#A9D0F5;
}
h1
{
color:blue;
text-align:center;
margin-top:100px;
}
textarea
{
width:500px;
height:100px;
border:1px solid silver;
border-radius:5px;
font-size:17px;
padding:10px;
font-family:helvetica;
}
input[type="text"]
{
width:500px;
height:35px;
border:1px solid silver;
margin-top:10px;
border-radius:5px;
font-size:17px;
padding:10px;
font-family:helvetica;
}
input[type="submit"]
{
width:150px;
height:40px;
border:none;
background-color:#2E64FE;
color:white;
margin-top:10px;
border-radius:5px;
font-size:17px;
}
.comment_div
{
width:500px;
background-color:white;
margin:auto;
}
.comment_div .name
{
height:30px;
line-height:30px;
padding:10px;
background-color:grey;
color:white;
text-align:left;
}
.comment_div .comment
{
padding:10px;
text-align:left;
}
.comment_div .time
{
font-style:italic;
padding:10px;
background-color:grey;
color:white;
text-align:left;
}
不积跬步，无以至千里，让我们一起前进！
