怎么用jQuery結(jié)合PHP和MySQL讀取和發(fā)表評(píng)論

本篇內(nèi)容主要講解“怎么用jQuery結(jié)合PHP和MySQL讀取和發(fā)表評(píng)論”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么用jQuery結(jié)合PHP和MySQL讀取和發(fā)表評(píng)論”吧!

HTML

h4{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控制頁(yè)面外觀，注意其中#message用來(lái)控制發(fā)表評(píng)論成功后的提示信息的樣式。

jQuery

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

$(function(){ var comments = $("#comments"); $.getJSON("server.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); }); }); });

可以看出，需要通過(guò)$.each循環(huán)，讀取JSON數(shù)據(jù)，因?yàn)樯傻腏SON數(shù)據(jù)有多條評(píng)論。當(dāng)然你也可以使用for循環(huán)，但我更傾向于使用jQuery的$.each循環(huán)。

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

$("#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 = "<p><strong>"+user+"</strong>："+txt+"<span>剛剛</span></p>";            comments.append(str); $("#message").show().html("發(fā)表成功！").fadeOut(1000); $("#txt").attr("value",""); }else{ $("#message").show().html(msg).fadeOut(1000); }         }    }); });

當(dāng)輸入昵稱(chēng)和評(píng)論內(nèi)容后，點(diǎn)擊提交，通過(guò)Ajax向后臺(tái)comment.php程序發(fā)送請(qǐng)求，PHP對(duì)請(qǐng)求作出相應(yīng)，并將數(shù)據(jù)插入數(shù)據(jù)庫(kù)，成功后返回結(jié)果給前臺(tái)。

PHP

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

//連接數(shù)據(jù)庫(kù) 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);

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

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

include_once("connect.php"); $user = htmlspecialchars(trim($_POST['user'])); $txt = htmlspecialchars(trim($_POST['txt'])); if(empty($user)){   echo "昵稱(chēng)不能為空！";   exit; } if(empty($txt)){   echo "評(píng)論內(nèi)容不能為空！";   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接收前臺(tái)ajax提交過(guò)來(lái)的昵稱(chēng)和評(píng)論內(nèi)容參數(shù)，判斷參數(shù)的合法性，然后將數(shù)據(jù)插入到數(shù)據(jù)庫(kù)中，如果成功，則輸出1，返回給前臺(tái)jQuery處理。

本例使用簡(jiǎn)單容易的代碼詮釋了輕量、高效的jQuery結(jié)合PHP的ajax運(yùn)作機(jī)制，當(dāng)然這只是一個(gè)基礎(chǔ)的例子，jQuery還能做很多事情，留給大家去盡情發(fā)揮吧。最后，奉上數(shù)據(jù)庫(kù)表結(jié)構(gòu)：

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;

到此，相信大家對(duì)“怎么用jQuery結(jié)合PHP和MySQL讀取和發(fā)表評(píng)論”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！