最近与xiaofeng在实现一个类Digg的聚合网站,其中有一个很常见功能——“顶”贴,虽然使用普通的超连接也可以实现这一功能,但在用户点击后会有一个刷新的过程,要想有更好的体验,使用AJAX是必须的,这也是一个典型的AJAX应用。 AJAX在用户的操作和服务器间
最近与xiaofeng在实现一个类Digg的聚合网站,其中有一个很常见功能——“顶”贴,虽然使用普通的超连接也可以实现这一功能,但在用户点击后会有一个刷新的过程,要想有更好的体验,使用AJAX是必须的,这也是一个典型的AJAX应用。
AJAX在用户的操作和服务器间建立了一个桥梁,改变了以前在浏览器中每次点击都要刷新页面才能获取新数据的缺点,用户在浏览器的行为将被AJAX的JavaScript脚本捕获,并适时的向服务器获取数据,再在浏览器中进行显示。
最终的结果,是实现一个由一个超连接和一个span,点击超连接后,将数据库中该文章被顶次数加1,另外将span中显示的被顶数加1。具体演示可以参考Digg.com主页中的Digg按钮。这一功能分别有以下两个文件来实现:
index.php:文章列表,有多篇文章,每篇文章标题的左侧显示有该文章的被顶数及“顶”按钮;
dig.php:接受一个get参数,名称为postid,值为文章的id,实现的功能是将这篇文章存储在数据库中的被顶次数加1;
在一个文章列表中,拥有多个文章,而为了控制每篇文章的次数,需要对显示被顶次数的span指定一个唯一的id。例如,下面的代码可以实现这一功能($row为从数据库中取出的一行,其中id为文章id,dig为该文章被顶次数):
<p class="line">1</p> ログイン後にコピー ログイン後にコピー |
<p class="line"><span id="numDig-<?php echo $row[">"><?php echo $row['dig'];?></span></p> ログイン後にコピー |
利用文章在数据库中的id和一个固定的字符串就为span指定了唯一的id,如numDig-474等。
在其下方还有一个供点击的超连接,超连接的单击事件将调用javascript中自定义的dig函数,并向其传送一个参数,参数内容为被顶文章的id,实现如下:
<p class="line">1</p> ログイン後にコピー ログイン後にコピー |
<p class="line"><a href="javascript:void(0)" onclick="dig(<?php echo $row['id'];?>)" id="btnDig-<?php echo $row['id']?>">顶</a></p> ログイン後にコピー |
文章列表中显示被顶次数的顶贴连接就完成了。
对于这个脚本来讲,它要实现以下两个方面的功能
<p class="line">1</p> ログイン後にコピー ログイン後にコピー |
<p class="line">function changeNumDig(postid) {</p><p class="line"> if(!isNaN(postid)) {</p><p class="line"> spanNumDigName = "numDig-" + postid;</p><p class="line"> numDig = document.getElementById(spanNumDigName).innerHTML;</p><p class="line"> if(!isNaN(numDig)) {</p><p class="line"> numDig ++;</p><p class="line"> document.getElementById(spanNumDigName).innerHTML = numDig;</p><p class="line"> }</p><p class="line"> }</p><p class="line">}</p> ログイン後にコピー |
另外就是更改数据库中的被顶次数,即向dig.php提交被顶文章的id,构造一个URL,再将其提交即可。这一过程需要使用AJAX中最重要的对象XmlHttpRequest,这一对象的创建不同的浏览器不一样,具体创建的方法可以参考W3CSchool中的介绍。代码如下:
<p class="line">1</p> ログイン後にコピー |
<p class="line">function GetXmlHttpRequest() {</p><p class="line"> var xmlHttpReq = null;</p><p class="line"> try {</p><p class="line"> xmlHttpReq = new XMLHttpRequest();</p><p class="line"> }</p><p class="line"> catch(e) {</p><p class="line"> try {</p><p class="line"> xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");</p><p class="line"> }</p><p class="line"> catch(e) {</p><p class="line"> xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");</p><p class="line"> }</p><p class="line"> }</p><p class="line"> return xmlHttpReq;</p><p class="line">}</p> ログイン後にコピー |
具体实现过程是使用XmlHttpRequest对象的open方法,实现代码如下:
<p class="line">1</p> ログイン後にコピー |
<p class="line">function dig(postid) {</p><p class="line"> if(!isNaN(postid)) {</p><p class="line"> var url = "dig.php?postid=" + postid;</p><p class="line"> xmlHttpReq = GetXmlHttpRequest();</p><p class="line"> xmlHttpReq.open("GET", url, true);</p><p class="line"> xmlHttpReq.send(null);</p><p class="line"> changeNumDig(postid);</p><p class="line"> }</p><p class="line">}</p> ログイン後にコピー |
3、dig.php修改数据库中的被顶次数
dig.php接受一个需要改变被顶次数的文章id,然后在数据库中查询其所在行,将其dig属性自增1即可。
考虑到安全问题,也需要先检查传进来的文章id是否为数字,然后连接数据库,构造查询字符串,执行检查并关闭即可。具体实现代码如下:
<p class="line">1</p> ログイン後にコピー ログイン後にコピー |
<p class="line">if(!empty($_GET['postid']) and (ctype_digit($_GET['postid']))) {</p><p class="line"> require_once('config.php');</p><p class="line"> $db = new mysqli($dbhost, $dbuser, $dbpwd, $dbname) or die();</p><p class="line"> $query_string = "UPDATE top10_posts SET dig = dig + 1 WHERE id ={$_GET['postid']}";</p><p class="line"> $db->query('SET character_set_client = utf8');</p><p class="line"> $db->query('SET character_set_connection = utf8');</p><p class="line"> $db->query('SET character_set_results = utf8');</p><p class="line"> $db->query($query_string);</p><p class="line"> $db->close();</p><p class="line">}</p> ログイン後にコピー |
以上三部分即可实现顶贴功能,这可以在很多Web2.0和聚合网站中看到,只不过可能要相对复杂,但实现的逻辑大都如此。
最近与xiaofeng在实现一个类Digg的聚合网站,其中有一个很常见功能——“顶”贴,虽然使用普通的超连接也可以实现这一功能,但在用户点击后会有一个刷新的过程,要想有更好的体验,使用AJAX是必须的,这也是一个典型的AJAX应用。
AJAX在用户的操作和服务器间建立了一个桥梁,改变了以前在浏览器中每次点击都要刷新页面才能获取新数据的缺点,用户在浏览器的行为将被AJAX的JavaScript脚本捕获,并适时的向服务器获取数据,再在浏览器中进行显示。
最终的结果,是实现一个由一个超连接和一个span,点击超连接后,将数据库中该文章被顶次数加1,另外将span中显示的被顶数加1。具体演示可以参考Digg.com主页中的Digg按钮。这一功能分别有以下两个文件来实现:
index.php:文章列表,有多篇文章,每篇文章标题的左侧显示有该文章的被顶数及“顶”按钮;
dig.php:接受一个get参数,名称为postid,值为文章的id,实现的功能是将这篇文章存储在数据库中的被顶次数加1;
原文地址:利用PHP和AJAX实现“顶”贴功能, 感谢原作者分享。