jquery ajax之点赞功能的实现

之前,一直想用一下ajax的技术到项目中,看他到底好处在哪里,为什么会被这么多人所推崇。

还记得之前也是看过jquery,但是现在回过来想想,其实能够记起来的东西很少,只有将知识应用起来,可能才会记忆深刻吧!今年开始我逐渐开始积累起自己的一些代码和

新知识,这样的话到以后要用的时候可以作为参考之用。

这次利用ajax为项目实现了一个点赞的功能,点击图片在不重新加载页面的情况下增加赞数,同时将host ip和赞数保存到数据库中,来看代码:

function addDianzan(s){
  
 var value=parseInt(document.getElementById(s).innerHTML);
 value=value+1;
  
 document.getElementById(s).innerHTML=value;
 $.ajax({ //一个Ajax过程
 type: "post", //以post方式与后台沟通
 url : "default/actDianzanAction", //与此php页面沟通
 dataType:'json',//从php返回的值以 JSON方式 解释
 data: {"dianzan":value,"activityId":s}, //发给php的数据有两项,分别是上面传来的u和p
 success: function(json){//如果调用php成功
 //alert(json.username+'\n'+json.password); //把php中的返回值(json.username)给 alert出来
 //alert("haha"); //把php中的返回值显示在预定义的result定位符位置
 }
 });
 }
function zanzhu(s,y){ 
 //alert("ssssssss");
 var id=s;
 var name=y;
 var tel=document.getElementById(id+'tel').value;
 var name=document.getElementById(id+'name').value;
  
 //zanzhuForm.action='default/zanzhuAction?activityId='+s+'&activityName='+y;
 document.getElementById(id+'zanzhu').value="已赞助";
 document.getElementById(id+'zanzhu').disabled=true;
 $.ajax({ //一个Ajax过程
 type: "post", //以post方式与后台沟通
 url : "default/zanzhuAction", //与此php页面沟通
 dataType:'json',//从php返回的值以 JSON方式 解释
 data: {"activityName":y,"activityId":id,"name":name,"tel":tel}, //发给php的数据有两项,分别是上面传来的u和p
 success: function(json){//如果调用php成功
 //alert(json.username+'\n'+json.password); //把php中的返回值(json.username)给 alert出来
 //alert("haha"); //把php中的返回值显示在预定义的result定位符位置
 }
 });
 

  • 8
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现评论列表点赞功能,您需要使用Semantic UI中的一些组件和JavaScript代码。 首先,您需要在评论列表中添加一个点赞按钮。您可以使用Semantic UI中的“按钮”组件来实现这一点。例如: ```html <div class="ui comments"> <div class="comment"> <div class="content"> <div class="text">这是一条评论</div> <button class="ui icon basic button like-button"><i class="thumbs up icon"></i></button> </div> </div> </div> ``` 在这个例子中,我们在评论文本下方添加了一个点赞按钮,并使用了“thumbs up”图标。 接下来,您需要编写一些JavaScript代码来处理点赞按钮的点击事件。例如,您可以使用jQuery来选择按钮并添加一个点击事件监听器: ```javascript $('.like-button').on('click', function() { // 处理点赞按钮点击事件 }); ``` 在事件处理程序中,您可以使用Ajax来将点赞数据发送到服务器,并更新UI以反映点赞的状态。例如: ```javascript $('.like-button').on('click', function() { var commentId = $(this).closest('.comment').data('id'); $.post('/api/likeComment', { commentId: commentId }, function(result) { if (result.success) { $(this).addClass('liked'); $(this).find('.icon').addClass('blue'); $(this).attr('disabled', true); } }); }); ``` 在这个例子中,我们从点赞按钮的最近的评论元素中获取评论ID,然后使用Ajax点赞数据发送到服务器的“/api/likeComment”端点。在服务器上处理点赞后,我们更新UI以反映点赞的状态,例如将按钮的class更改为“liked”,添加一个蓝色的图标,并禁用按钮。 当然,这只是一个简单的示例。实际上,您需要编写更多的代码来处理取消点赞、显示点赞数量等功能。但是,使用Semantic UI和JavaScript,您可以很容易地构建一个功能强大的评论列表点赞功能

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值