從網(wǎng)上找到一個(gè)能實(shí)現(xiàn)簡單comment功能的教程姿骏，有See Demo可以提前預(yù)覽效果敷矫，而且作者也很貼心地在網(wǎng)頁下方公布了完整的code, 所以我最終決定使用這個(gè)教程禀横。
網(wǎng)址：http://talkerscode.com/webtricks/simple-instant-comment-system-using-ajax.php
這個(gè)實(shí)時(shí)評(píng)論功能使用到Ajax兄世、PHP 和 MySQL 三部分知識(shí)老速。在前一個(gè)有關(guān) XAMPP 的教程的基礎(chǔ)上协饲，我對(duì) PHP 和 MySQL 有了一點(diǎn)了解畏腕，至于 Ajax 我是完全不了解缴川，基礎(chǔ)功不扎實(shí)導(dǎo)致即使拷貝下程序放到 IDE 中編譯，也遇到各種各樣的問題描馅。
我不是一個(gè)會(huì)看參考書的人把夸，我學(xué)知識(shí)都是基于自己的興趣，然后再借助網(wǎng)絡(luò)的力量铭污，遇到不懂的就問
google 老師（至于為什么不問度娘恋日？我總是找不到答案），循序漸進(jìn)地把各個(gè)知識(shí)點(diǎn)補(bǔ)全嘹狞。
在這樣一個(gè)看似都準(zhǔn)備好一切岂膳，只需輕點(diǎn)“運(yùn)行”按鈕，就可以看到結(jié)果的程序磅网，我也花費(fèi)了一些時(shí)間去調(diào)試谈截。原因在我看來，有以下幾點(diǎn)：
- 編譯環(huán)境不同
- 文件放置路徑不同
- 語法過時(shí)涧偷，需要更新
在編譯過程中簸喂，我遇到了許多障礙，現(xiàn)在我把遇到的問題和解決方法總結(jié)下來燎潮，希望可以為使用這份教程的學(xué)友提供幫助喻鳄。
問題一：comments.php 文件無法引用 comment_style.css 文件。后來發(fā)現(xiàn)是路徑需要修改确封。
問題一參考資料：
https://segmentfault.com/q/1010000004438063/a-1020000004438890
問題二：缺少顯示已有評(píng)論內(nèi)容部分除呵。
考慮出現(xiàn)這樣的問題，可能是由于我使用的編譯環(huán)境不能完整顯示代碼的初衷爪喘，或者部分代碼已過時(shí)颜曾，需要進(jìn)一步更新。于是我選擇一步步調(diào)試程序腥放，找到問題所在泛啸。我使用的編譯工具是 Brackets, 可在Extension Manager 中下載 PHP Debugger 插件。安裝插件的過程參見：https://www.youtube.com/watch?v=ejbWCxpejhI
我在安裝 PHP Debugger 過程中遇到了一點(diǎn)小麻煩秃症，就是 php.ini 文件中缺失 xdebug 部分候址，因此無法對(duì)其進(jìn)行修改。在大量查閱網(wǎng)上資料后种柑，我認(rèn)定我下載的 XAMPP 版本可能取消了 xdebug岗仑， 我試了下 XAMPP for Windows 5.6.12 版本 xdebug 可用。但是這個(gè)版本的Apache 會(huì)與 xdebug 的 port 沖突聚请，需要響應(yīng)進(jìn)行修改荠雕。
問題二參考資料：
安裝 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
問題三：調(diào)試后發(fā)現(xiàn) mysql_query() 函數(shù)沒有起到查詢數(shù)據(jù)庫的作用稳其，于是選擇用 PDO 代替。
問題三參考資料：
http://stackoverflow.com/questions/21353448/how-to-do-mysql-query-to-pdo
問題四： 修改自閉合script標(biāo)簽
問題三參考資料：https://www.zhihu.com/question/36774461
問題五： 注意 $.ajax() 方法中的 URL 路徑
問題五參考資料：
https://openenergymonitor.org/forum-archive/node/107.html
綜上所述炸卑，我把修改好的 code 貼出來既鞠，學(xué)友們可在此基礎(chǔ)上自由發(fā)揮！
步驟一：建立數(shù)據(jù)庫存儲(chǔ) comment 內(nèi)容盖文，方便調(diào)取和查找嘱蛋。
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 文件，程序從這里開始運(yùn)行五续。
<!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>
步驟三：建立執(zhí)行存儲(chǔ) 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;
?>
步驟四：創(chuàng)建 CSS 文件疙驾，為網(wǎng)頁“化個(gè)妝”凶伙。
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;
}
不積跬步，無以至千里它碎，讓我們一起前進(jìn)函荣！
