jQuery ajax实现顶一下，踩一下效果

======================================================
注：本文源代码点此下载
======================================================

先看下效果图

本博客上面的顶一下,踩一下效果是直接用别人做好的插件放上去的,上星期正好要用到这个效果,就去研究了下。下面就一步一步来实现整个效果。。。。

demo页面的实现

xml/html代码

div class="digg" id="digg">

div class="good"> a href="#">p>这个文档不错p>

div class="bar">div id="g_img" style="width:70%">div>

div>span class="num" id="num">70%(7000)span> a> div>

div class="bad"> a href="#">p>文档有待改进p>

div class="bar">div id="b_img" style="width:30%">div>

div>span class="num">30%(3000)span> a> div>

div>

主要一点就是通过百分比来控制g_img的宽度,至于css代码就不贴出来了。

看下demo就知道了

有了demo,其他实现起来就方便多了,首先是页面获取html,页面第一次加载,用ajax获取后台数据,不要直接显示。(这里为了方便测试,就用asp作为后台语言)

下面是asp输出html代码

xml/html代码

function getdigshtml()'输出html

dim rsajax,sql,str,digsnum,undigsnum,digsnumall,digsper,undigsperset rsajax=server.createobject("adodb.recordset")

sql="select * from dig where id=1"rsajax.open sql,conn,1,1

digsnum=rsajax("digs")undigsnum=rsajax("undigs")

if isnull(digsnum) then digsnum=0if isnull(undigsnum) then undigsnum=0

digsnumdigsnumall=digsnum+undigsnum

if digsnumall=0 thendigsper=0

undigsper=0else

digsper=formatnumber(cint(digsnum)/cint(digsnumall),3)*100undigsper=formatnumber(cint(undigsnum)/cint(digsnumall),3)*100

end if

str="

"strstr=str&"a href=javascript:isdigs('digs') >"

strstr=str&"p>这个文档不错p>div class='bar'>div id='g_img' style='width:"&digsper&"%'>div>div>"strstr=str&"span class='num'>"&digsper&"%("&digsnum&")span>"

strstr=str&"a>div>div class='bad'>"strstr=str&"a href=javascript:isdigs('undigs') >"

strstr=str&"p>文档有待改进p>div class='bar'>div id='b_img' style='width:"&undigsper&"%'>div>div>"strstr=str&"span class='num'>"&undigsper&"%("&undigsnum&")span>"

strstr=str&"a>div>"getdigshtml=str

end function

输出完了 接下来就是前台获取,这时候我们就要用到jquery ajax,为什么不直接用ajax,原因很简单,我不会。。。。。看一下jquery中ajax代码,很简单

javascript代码

function getdigshtml()//获取顶一下,踩一下html

{$.ajax({

type:'post',url:'digg.asp',

data:'action=getdigshtml',success:function(msg){

$("#digg").html(msg);}

})}

输出完了,接下来一步就是digs和undigs的操作了,跟获取html的代码差不多

javascript代码

function isdigs(digtype)//顶一下,踩一下操作

{$.ajax({

type:'post',url:'digg.asp',

data:'action=digs&digtype='+digtype,/*beforesend:function(){

$("#vote").hide();$("#loadings").show();

}, ajax请求显示loading效果*/success:function(msg){

switch (msg){

/*后台用来判断case '1':

$("#loadings").hide();$("#vote").show();

alert("请先登录!");break;

case '2':$("#loadings").hide();

$("#vote").show();alert("请先下载,再操作!");

break;case '4':

$("#loadings").hide();$("#vote").show();

alert("您已经参与过评价!");break;*/

case '3':getdigshtml();//重新绑定html

//$("#loadings").hide();//$("#vote").show();

alert("谢谢你的参与!");break;

default:

}}

})}

注释掉的代码:一部分是后台数据合法验证用的,beforesend这个方法是ajax请求执行前的相关操作(用于做loading比较多)

最后一步就是,每次数据提交完并且成功返回,getdigshtml()都要重新获取绑定下,这样就保证了数据的实时性。

看下最后的效果点我下载演示

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/