我曾写了一篇关于发表类似微博程序的文章:,而本文不同之处在于使用JSON读取评论列表,请看我一一讲述。
HTML
- <div id="comments">
- <h3>读取评论</h3>
- </div>
- <div id="post">
- <h3>发表评论</h3>
- <p>昵称:</p>
- <p><input type="text" class="input" id="user" /></p>
- <p>评论内容:</p>
- <p><textarea class="input" id="txt" style="width:100%; height:80px"></textarea></p>
- <p><input type="submit" value="发表" id="add" /></p>
- <div id="message"></div>
- </div>
HTML结构主要由读取评论列表和发表评论的表单。
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控制页面外观,注意其中#message用来控制发表评论成功后的提示信息的样式。
jQuery
首先来看读取评论列表功能,当页面加载的时候,使用getJSON方法读取服务端PHP生成的JSON数据,展示给用户。
- $(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);
- });
- });
- });
可以看出,需要通过$.each循环,读取JSON数据,因为生成的JSON数据有多条评论。当然你也可以使用for循环,但我更倾向于使用jQuery的$.each循环。
再来看下发表评论功能的前端代码。
- $("#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("发表成功!").fadeOut(1000);
- $("#txt").attr("value","");
- }else{
- $("#message").show().html(msg).fadeOut(1000);
- }
- }
- });
- });
当输入昵称和评论内容后,点击提交,通过Ajax向后台comment.php程序发送请求,PHP对请求作出相应,并将数据插入数据库,成功后返回结果给前台。
PHP
先来看PHP读取和生成JSON数据的server.php代码。
- //连接数据库
- 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版本应该是5.2以上才能使用json_encode函数。
再来看下发表评论的comment.php代码。
- include_once("connect.php");
- $user = htmlspecialchars(trim($_POST['user']));
- $txt = htmlspecialchars(trim($_POST['txt']));
- if(empty($user)){
- echo "昵称不能为空!";
- exit;
- }
- if(empty($txt)){
- echo "评论内容不能为空!";
- 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提交过来的昵称和评论内容参数,判断参数的合法性,然后将数据插入到数据库中,如果成功,则输出1,返回给前台jQuery处理。
本例使用简单容易的代码诠释了轻量、高效的jQuery结合PHP的ajax运作机制,当然这只是一个基础的例子,jQuery还能做很多事情,留给大家去尽情发挥吧。最后,奉上数据库表结构:
- 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;
零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。