search

Home  >  Article  >  Web Front-end  >  jQuery ajax realizes the effect of thumbs up and thumbs down_jquery

jQuery ajax realizes the effect of thumbs up and thumbs down_jquery

WBOY
WBOYOriginal
2016-05-16 18:22:591373browse

Implementation of demo page

Copy code The code is as follows:


The main point is to control the width of g_img through percentage. As for the css code, I will not post it.
Demo code:
Copy code The code is as follows:





Digg




With demo, other implementations are much easier First, the page gets the html. When the page is loaded for the first time, use ajax to get the background data. Do not display it directly. (For the convenience of testing, asp is used as the background language here)
The following is the asp output html code
Copy the code The code is as follows :

function getdigshtml()'输出html
dim rsajax,sql,str,digsnum,undigsnum,digsnumall,digsper,undigsper
Set 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=0
if isnull(undigsnum) then undigsnum=0
digsnumdigsnumall=digsnum undigsnum
if digsnumall=0 then
digsper=0
undigsper=0
else
digsper=FormatNumber(cint(digsnum)/cint(digsnumall),3)*100
undigsper=FormatNumber(cint(undigsnum)/cint(digsnumall),3)*100
end if
str="
"
strstr=str&""
strstr=str&"

这个文档不错

"
strstr=str&""&digsper&"%("&digsnum&")"
strstr=str&"
"
strstr=str&""
strstr=str&"

文档有待改进

"
strstr=str&""&undigsper&"%("&undigsnum&")"
strstr=str&"
"
getdigshtml=str
end function

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

function getdigshtml()//获取顶一下，踩一下html
{
$.ajax({
type:'POST',
url:'digg.asp',
data:'action=getdigshtml',
success:function(msg){
$("#digg").html(msg);
}
})
}

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

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()都要重新获取绑定下，这样就保证了数据的实时性。
演示代码需要asp环境，大家可以测试下。
打包下载地址： http://www.jb51.net/jiaoben/28489.html
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JQUERY code to get form form value_jqueryNext article：JQUERY code to get form form value_jquery

Related articles

See more