index.html
<script src="jquery.min.js"></script> <script> $(function(){ $.ajax({ //页面载入时载入评论信息 type:"GET", url:"10-17.php?act=load&id="+Math.random(), error:function(){$("#comments").html("获取评论信息失败");}, success:function(data){ $("#comments").html(data); } }); $("#Submit").click(function(){ title=$("#title").val(); author=$("#author").val(); //获取表单中的数据 email=$("#email").val(); content=$("#content").val(); $.post("10-17.php",{ //发送表单中的数据给addnew.asp title:escape(title), author:escape(author), email:escape(email), content:escape(content), act:"add" }, function(data){
alert(data); if(data==1){ $("#title").val(''); $("#author").val(''); //清空添加记录框中的内容 $("#email").val(''); $("#content").val(''); var newcom="<div style='border:1px solid #CCC;margin:5px;'>网友："+author+" 发表于"+Date()+"<br/>标题："+title+"<br/>"+content+" Email："+email+"</div>"; $("#comments").prepend(newcom); //插入到元素内部的最前面 }
} ); } ); } ); </script> </head> <body> <h3 style="margin:4px; text-align:center">网友评论</h3> <div id="comments"><!--用来载入评论的内容，未加载完时显示加载中图标--> <div style="border:1px solid #CCC;margin:5px 5px;"><img src="onLoad.gif" alt="加载中..." /> 评论加载中......</div> </div> <form style="margin:8px;"> <table width="350" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#333333"> <caption>请在下面发表你的高见吧</caption> <tbody bgcolor="#ffffff"> <tr> <td>昵称：</td> <td><input type="text" id="author"></td> </tr> <tr> <td>邮箱：</td> <td><input type="text" id="email"></td> </tr> <tr> <td width="100">标题：</td> <td width="325"><input type="text" id="title"></td> </tr> <tr> <td>内容：</td> <td><textarea id="content" cols="30" rows="2"></textarea></td> </tr> <tr> <td></td> <td><input type="button" id="Submit" value="发表评论"></td> </tr> </tbody> </table> </form>
10-17.php
<? header("Content-type: text/html; charset=gb2312"); require('conn.php'); $act=$_REQUEST["act"]; //获取act变量的值 //$act="load"; if($act=="load") { //如果是请求载入评论 $result=$conn->query("select * from lyb order by ID desc limit 3"); if($result->num_rows>0) { while($row=$result->fetch_assoc()){ ?> <div style="border:1px solid #CCC;margin:5px;"> 网友：<?= $row["author"] ?> 发表于<?= $row["date"] ?><br/> 标题：<?= $row["title"] ?><br/> <?= $row["content"] ?> Email：<?= $row["email"] ?> </div> <? } } else echo "<p>目前还没有用户留言</p>"; } if($act=="add") { //'如果是发表评论 $title = unescape($_POST["title"]); //获取10-16.php传来的数据 $author = unescape($_POST["author"]); $email = unescape($_POST["email"]); $content = unescape($_POST["content"]); $date=date("Y-m-d h:i:s"); $sql="Insert into lyb(title,author,email,content,date) values('$title','$author','$email', '$content','$date')"; if($conn->query($sql)) echo 1; } ?>
(1)该评论系统中的新闻是在页面载入之后采用Ajax技术载入进来的，因此HTML代码中可以没有任何用来读取数据表lyb中的评论数据的php代码。
(2)载入评论的容器元素#comments中本来就含有一个“正在加载”的图像和文字，当载入完成之后，这些内容会被评论信息替换掉。达到不用$.ajax()方法的beforeSend（）函数也能实现显示“正在加载”图标的效果。
(3)该评论系统也采用了在服务器端和客户端分别插入记录的方法，服务器端插入记录成功后，发送标志1给客户端，客户端采用prepend()方法动态插入div元素。