我曾寫了一篇關于發表類似微博程序的文章：PHP+Mysql+jQuery實現發布微博程序--jQuery篇，而本文不同之處在于使用JSON讀取評論列表，請(qǐng)看我一一講述。

XHTML

	
	

		讀取評論
	




	
	

		發表評論
	

	

		昵稱：
	

	

		


	

	

		評論內(nèi)容：
	

	

		


	

	

		


	

	

		
	

HTML結構主要由讀取評論列表和(hé)發表評論的表單。

CSS

h3{font-size:14px}
#comments{margin:10px auto}
#post{margin-top:10px}
#comments p,#post p{line-height:30px}
#comments p span{margin:4px; color:#999}
#message{position:relative; display:none; margin-top:-100px; margin-left:30px; 
background:#369; color:#fff; z-index:1001}

用CSS控制(zhì)頁面外觀，注意其中#message用來(lái)控制(zhì)發表評論成功後的提示信息的樣式。

jQuery

首先來(lái)看讀取評論列表功能，當頁面加載的時(shí)候，使用getJSON方法讀取服務端PHP生(shēng)成的JSON數(shù)據，展示給用戶。

$(function(){
	var comments = $("#comments");
	$.getJSON("server.php",function(json){
		$.each(json,function(index,array){
			var txt = "

	"+array["user"]+"："+array["comment"]+""
+array["addtime"]+"

";
			comments.append(txt);
		});
	});
});

可(kě)以看出，需要通(tōng)過$.each循環，讀取JSON數(shù)據，因為(wèi)生(shēng)成的JSON數(shù)據有(yǒu)多(duō)條評論。當然你(nǐ)也可(kě)以使用for循環，但(dàn)我更傾向于使用jQuery的$.each循環。

再來(lái)看下發表評論功能的前端代碼。

$("#add").click(function(){
	var user = $("#user").val();
	var txt = $("#txt").val();
	$.ajax({
         type: "POST",
         url: "comment.php",
         data: "user="+user+"&txt="+txt,
         success: function(msg){
			if(msg==1){
			    var str = "

	"+user+"："+txt+"剛剛

";
	            comments.append(str);
				$("#message").show().html("發表成功！").fadeOut(1000);
				$("#txt").attr("value","");
			}else{
				$("#message").show().html(msg).fadeOut(1000);
			}
         } 
    });
});

當輸入昵稱和(hé)評論內(nèi)容後，點擊提交，通(tōng)過Ajax向後台comment.php程序發送請(qǐng)求，PHP對請(qǐng)求作(zuò)出相應，并将數(shù)據插入數(shù)據庫，成功後返回結果給前台。

PHP

先來(lái)看PHP讀取和(hé)生(shēng)成JSON數(shù)據的server.php代碼。

//連接數(shù)據庫
include_once("connect.php");

$q=mysql_query("select * from comments");
while($row=mysql_fetch_array($q)){
		$comments[] = array("id"=>$row[id],"user"=>$row[user],"comment"=>$row[comment],
"addtime"=>$row[addtime]);
}
echo json_encode($comments);

注意你(nǐ)的PHP版本應該是5.2以上(shàng)才能使用json_encode函數(shù)。

再來(lái)看下發表評論的comment.php代碼。

include_once("connect.php");

$user = htmlspecialchars(trim($_POST['user']));
$txt = htmlspecialchars(trim($_POST['txt']));
if(empty($user)){
   echo "昵稱不能為(wèi)空(kōng)！";
   exit;
}
if(empty($txt)){
   echo "評論內(nèi)容不能為(wèi)空(kōng)！";
   exit;
}
$time = date("Y-m-d H:i:s");
$query=mysql_query("insert into comments(user,comment,addtime)values('$user','$txt','$time')");
if($query)  echo "1";

comment.php接收前台ajax提交過來(lái)的昵稱和(hé)評論內(nèi)容參數(shù)，判斷參數(shù)的合法性，然後将數(shù)據插入到數(shù)據庫中，如果成功，則輸出1，返回給前台jQuery處理(lǐ)。

本例使用簡單容易的代碼诠釋了輕量、高(gāo)效的jQuery結合PHP的ajax運作(zuò)機制(zhì)，當然這隻是一個(gè)基礎的例子，jQuery還(hái)能做(zuò)很(hěn)多(duō)事情，留給大(dà)家(jiā)去盡情發揮吧(ba)。最後，奉上(shàng)數(shù)據庫表結構：

CREATE TABLE `comments` (
  `id` int(11) NOT NULL auto_increment,
  `user` varchar(30) NOT NULL,
  `comment` varchar(200) NOT NULL,
  `addtime` datetime NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM;