[php+jquery+ajax]实现文章顶踩赞的实时数据显示

上图就是我的设计的最终结果。

先是数据库设计，对应该文章的记录中有两个字段，分别对对应顶和踩。

先看html页面代码：

<tr>
<td align=”center”><span id=”ding” style=” font-weight:bold; font-size:36px;font-family:Georgia, “Times New Roman”, Times, serif;”><img src=”templates/images/ding.gif” />顶一拳(<span id=”dingnum”>{$data_main.0.num_ding}</span>)</span></td>
<td align=”center”><span id=”cai” style=” font-weight:bold;font-size:36px;font-family:Georgia, “Times New Roman”, Times, serif;”><img src=”templates/images/cai.gif” />踩一脚(<span id=”cainum”>{$data_main.0.num_cai}</span>)</span></td>
</tr>

 

再看对应的jquery 代码（只以顶示例）：

//ding
$(document).ready(function(){
$(“#ding”).click(function(){
var pid=$(“#pid”).val();
//alert(pid);
var dinged=parseInt($(“#dingnum”).html())+1;
//alert(dinged);
$(“#dingnum”).load(“ding.php?pid=”+pid+”&num_ding=”+dinged);

})
});

其中的pid是我的文章id。$(“#dingnum”).load(“ding.php?pid=”+pid+”&num_ding=”+dinged)，这一句是jquery中ajax的典型应用，这其实就是返回对应页面的最终返回值。实例化一下就是：ding.php?pid=345&num_ding=87.那我这个ding.php是最终返回了当前这个文章被顶过的次数。通过jquery的强大的load函数取得当前值，并在html页面最终呈现出来。

再看一下ding.php这个页面代码，其实非常简单：

<?php
//这个是顶踩页面专用的
require(‘conn.php’);
//得到要操作的数据id
$pid=$_GET[pid];
$num_ding=$_GET[num_ding];

//$result=mysql_fetch_array(mysql_query(“select * from gif_article where id=’$pid'”));

$update=mysql_query(“update gif_article set num_ding=$num_ding where id=’$pid'”);

$result=mysql_fetch_array(mysql_query(“select * from gif_article where id=’$pid'”));

echo $result[num_ding];

?>

 

其实我这个ding.php页面是有多余代码的，大家可以看一下：get取得的值其实就是最后又返回的值，呵呵。由于 我是个人用的，所以我就不改了。如果你是给人家公司做事的，还是严谨一些好啦。而且我的顶踩是用的2个php页面来实现的，完全可以融合成一个单独页面的……

再上那个红蓝色的顶踩次数对比演示。也非常简单，就是利用td 的宽度来做区分的。look:

<tr>
<td bgcolor=”#FF0000″ width=”{$data_main.0.num_ding}/({$data_main.0.num_ding}+{$data_main.0.num_cai})”>&nbsp;</td>
<td bgcolor=”#0000FF” width=”{$data_main.0.num_cai}/({$data_main.0.num_ding}+{$data_main.0.num_cai})”>&nbsp;</td>
</tr>

最后的总结就是jquery太强大了，而且非常易学易用！这都 是国外货！！！