开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js和ajax点赞功能代码

点赞功能在前端开发中非常常见，通常涉及到JavaScript和AJAX技术。下面是一个简单的点赞功能实现示例，包括HTML、CSS和JavaScript代码。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点赞功能</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="post">
        <h2>这是一个帖子标题</h2>
        <button id="likeButton" class="like-button">点赞 (0)</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.like-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const likeButton = document.getElementById('likeButton');
    let likeCount = 0;

    likeButton.addEventListener('click', function() {
        likeCount++;
        likeButton.textContent = `点赞 (${likeCount})`;

        // 使用AJAX发送点赞请求到服务器
        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/like', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log('点赞成功');
            }
        };
        xhr.send(JSON.stringify({ postId: 1 })); // 假设帖子ID为1
    });
});

解释

HTML部分：创建了一个简单的页面结构，包含一个按钮用于点赞。
CSS部分：为点赞按钮添加了一些基本样式。
JavaScript部分：
- 监听DOMContentLoaded事件，确保DOM完全加载后再执行脚本。
- 获取点赞按钮元素，并初始化点赞计数器。
- 为按钮添加点击事件监听器，每次点击时增加点赞计数并更新按钮文本。
- 使用XMLHttpRequest对象发送AJAX POST请求到服务器，模拟点赞操作。

优势和应用场景

实时反馈：用户可以立即看到点赞数的变化，提升用户体验。
异步通信：通过AJAX实现异步数据传输，页面无需刷新即可更新数据。
广泛适用：适用于各种需要用户互动的场景，如社交媒体、论坛、博客等。

可能遇到的问题及解决方法

跨域问题：如果前端和后端不在同一个域名下，可能会遇到跨域请求问题。可以通过设置CORS（跨域资源共享）来解决。
跨域问题：如果前端和后端不在同一个域名下，可能会遇到跨域请求问题。可以通过设置CORS（跨域资源共享）来解决。
数据同步问题：如果多个用户同时点赞，可能会导致数据不一致。可以通过服务器端使用锁机制或数据库事务来保证数据的一致性。
性能问题：频繁的AJAX请求可能会影响服务器性能。可以通过节流（throttling）或防抖（debouncing）技术来减少请求次数。

希望这个示例能帮助你理解并实现点赞功能。如果有更多具体问题，欢迎继续提问！

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Django文章详情页面ajax点赞功能

使用技术利用Ajax点赞并局部刷新页面绑定事件点赞和绑定灵活处理利用F 页面局部刷新点赞数反序列json获取布尔值视图布尔值，必须用Json...反序列化才能使用 F的妙用点赞数自加1 def digg(request): # ajax 是json格式，特殊情况下需要反序列 import json from...HTML Ajax局部刷新功能 {% extends 'base.html' %} {# 继承公共部分 #} {% block content %} {% csrf_token %} {# 您已经推荐过#} {# 点赞和踩...来操作点赞功能 #} $.ajax({ url: '/digg/', type: 'post

8812 0

Pbootcms ajax 无刷新点赞

先引入 jq 文件 js"> 无须使用 API，把以下代码放入合适的位置即可...，可自定义 css 点赞 ajax--> $('.support').on('click', //绑定事件 function() { $.ajax({ url: '{content:likeslink}'..., //点赞链接 data: { 'likes': 'likes' }, success: function(data) { $('#support_number').load(location.href...+ " #support_number"); //点赞后刷新#support_numbe if (data.state) {} else { $(".supported").html("已点赞！")

4.7K1 0

使用代码方式实现WordPress文章点赞功能

实现思路通过 ajax 实时显示点赞数量，自定义字段保存赞数量，Cookies 禁止重新点赞。...> 通过上面的三段代码就已经实现文章点赞功能，但是样式效果惨不忍睹，作者还提供了下面的样式，添加到主题style.css中（下方样式xiaoz未经测试） .post-like...但如果您网站启用了CDN，或使用了WP-Super-Cache这类静态缓存插件后，页面会被提前缓存起来，这样判断也就失效了，便可以无限点赞，于是xiaoz进行了改进，通过js再判断一次COOKIES是否存在...; } else{ $(this).postLike(); } }); 总结最后实现的功能类似小z博客文章下方的点赞效果，这里主要提供思路和代码实现...，实际还得根据自身情况调整和修改代码，对开发者而言应该不难。

1.1K1 0

利用 leanCloud 实现点赞功能

点赞功能社交平台的必备良药，谁谁谁什么时候给你点了个赞，点赞什么的貌似已经深入人心了。...的最新评论排行，所以借这个风顺便来做个点赞功能~ 点赞按钮实践操作和 valine 最新评论一样，首先需要引入 sdk 并初始化完成化后接入具体实现的代码即可（这个就不说了，上篇笔记里有写的）实现思路...这里再聊下思路，一般做点赞功能都是在本地点击计数之后再把数据上传到云端服务器，访问页面的时候直接根据页面拉取对应的数据填充即可。...=undefined){ //.. } 其他以上代码写入 SDK 初始化后运行就可以正常获取不同页面的点赞次数了，数据创建后会在 leancloud 控制台显示，如下其实拿到信息还可以通过点赞数量创建热门文章...（目前点赞和海报生成暂未开放仅限测试页面目前已全站开放，欢迎测试报bug~）下次聊下如何设置博主显示和置顶评论以及利用 html2canvas+qrcodejs 生成文章分享海报~ 上面有写到利用该方法统计页面访问量的情况

1421 0

Typecho实现文章点赞功能

特此水一篇折腾记录-Typecho实现文章点赞，当时也懒得记录，现在觉得有必要记录一下。...$cid . ';'); // 返回点赞数量 return ++$callback['agree']; } 然后找到post.php在顶部加入以下代码用于判断是否是点赞的 POST...>//点赞数量最后Ajax点赞：以下js代码添加至footer.php中， // 点赞按钮点击 $('#agree').on('click', function...() { // 发送 AJAX 请求 $.ajax({ // 请求方式 post type: 'post', // url 获取点赞按钮的自定义...var re = /\d/; // 匹配数字的正则表达式 // 匹配数字 if (re.test(data)) { // 把点赞按钮中的点赞数量设置为传回的点赞数量

1.7K3 1

PHP结合redis实现点赞功能

php /** * 点赞 */ namespace app\like\service; use app\common\DataService; use app\common\Redis; class...const LIKE_USER_RECEIVE_SHOW_CHINESENAME = '我点赞了这条'; const BLOG_CHINESENAME = '资讯'; /**...* 点赞资讯 * @param int $userId 用户ID * @param int $blogId 资讯ID */ public function...($userId, $sys); Redis::getInstance()->redisZrem($key, $blogId); //我的点赞全部列表...BlogInstanceModel::getInstance()->getOneById($blogId, $sys); return $blogInfo['data']; } } 复制代码

8472 0

点赞功能，用 MySQL？还是 Redis！

数据一致性点赞功能是目前app开发基本的功能今天我们就来聊聊点赞、评论、收藏等这些场景的db数据库设计问题， 1....我们先来看看场景的需求：显示点赞数量判断用户是否点过赞，用于去重，必须的判断显示个人点赞列表，一般在用户中心显示文章点赞列表我们先看一下头条和微博的例子 ? ?...查询文章的点赞用户 select user_id from star where post_id=? 点赞数量可以通过定时异步统计更新到post和user 表中。...这增加了存储空间和维护工作量，还可能有一致性问题。...下面说下redis作为storage的方案：场景a ：显示点赞数量在点赞的地方，只是显示一个点赞数量，能区分用户是否点赞过，一般用户不关心这个列表，这个场景只要一个数字就可以了，当数量比较大时，一般显示为

2K2 0

点赞功能设计与实现

点赞业务本身并不复杂，无非是对数据的update，但是点赞本身是无意识行为，并且同一个用户可对博文进行点赞/取消点赞，如果直接操作数据库，无疑会增加数据库io操作。...，1:点赞，2:取消点赞 public enum ThumbEnum { THUMB(1,"点赞"), CANCELTHUMB(2,"取消点赞"), private String...ThumbEnum(String messageName) { MessageName = messageName; } } 4.接口实现根据是否存在key判断是点赞还是取消点赞...("isLike", 1);//1未点赞2已点赞 } else { //记录点赞用户 redisService.sadd(key, userIdStr...按理说读取与写操作应该分为两个redis，但是点赞统计的是评论数，大key进行拆分后，无需对其读写分离。

9.1K5 1

点赞功能，用 MySQL 还是 Redis ？

作者：一起web编程 www.toutiao.com/i6825148720728769028 点赞功能是目前app开发基本的功能今天我们就来聊聊点赞、评论、收藏等这些场景的db数据库设计问题， 1...我们先来看看场景的需求：显示点赞数量判断用户是否点过赞，用于去重，必须的判断显示个人点赞列表，一般在用户中心显示文章点赞列表我们先看一下头条和微博的例子 ? ?...查询文章的点赞用户 select user_id from star where post_id=? 点赞数量可以通过定时异步统计更新到post和user 表中。...这增加了存储空间和维护工作量，还可能有一致性问题。...前几天写的一篇文章，受到众多同行的热情回复，能和众多同行一起交流，深感荣幸！对于工程类问题，没有标准的方案，一千个人有一千个方案，哪个最适合你只有你自己知道！期待你更好的思路和方法。

1.1K3 0

【Auto.js】QQ名片点赞

"auto"; function 下滑(){ className("AbsListView").scrollable().scrollForward(); } function 赞(){ var like...= className("ImageView").desc("赞").find(); if(like){ like.click(); return true; } return false; } function...显示更多(){ for(let i = 0; i < 2;i++){ click("显示更多"); } } toast("请打开自己的资料页，点击点赞图标"); sleep(100); waitForActivity...com.tencent.mobileqq.activity.VisitorsActivity"); while(notStopped()){ var i = 0; while(i < 10){ i += 赞(

4.2K3 0

QQ空间自动点赞代码

使用方法进入QQ空间网页版，并且登录复制以下代码 var x=5,y=10; function autoClick() { y=y+5; var zan...window.scrollBy(x,y); } window.setInterval(autoClick,2000); 按f12 进入console 粘贴如果嫌慢的话可以修改上面的这段代码

27.3K2 0

QQ空间自动点赞代码

前言原文地址：https://blog.ascv.cn/archives/41.html　每逢节假日，总有朋友同学发说说，求关注，自己又没时间去点赞。...现在让我们来在QQ空间控制台加上一段代码　一段Javascript代码，让电脑自动为我们点赞。...}; window.scrollBy(x,y); } window.setInterval(autoClick,2000);----使用方法1：进入QQ空间2：复制代码...3：按f12 进入控制台也就是console4：粘贴回车喝口水如果嫌慢的话可以修改这段代码window.setInterval(autoClick,2000);复制代码//2000代表两秒屏幕下滑

4.8K6 0

Js原生Ajax和Jquery的Ajax

Js原生Ajax和Jquery的Ajax 一、Ajax概述 1．什么是同步，什么是异步同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态异步现象：客户端发送请求到服务器端...，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面1 功能。...二、js原生的Ajax技术（了解） js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤： 1）创建Ajax引擎对象 2）...为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎） 3）绑定提交地址 4）发送请求 5）接受响应数据 //原生js，Ajax异步访问 function fn1(){...js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中经常使用的有三种 1）.get(url, [data], [callback

19.6K2 0

HarmonyOS实战—实现抖音点赞和取消点赞效果

双击点赞和双击取消点赞如：在抖音中双击屏幕之后就可以点赞，小红心就会变亮 [在这里插入图片描述] 把白色和红色的心形图片复制到 media 下 [在这里插入图片描述] [在这里插入图片描述] 需要图片的可以自取...，下面白色图片由于没有背景，所以显示的是白色的，下载后鼠标点击就能看见了 [请添加图片描述] [请添加图片描述] 因为要双击屏幕才能点赞，所以还要给布局组件id 代码实现： ability_main <...业务分析：双击屏幕之后点赞。（上面已实现），再次双击屏幕之后，不会取消点赞，只有点击后红心之后才能取消点赞。...单击红心也可以点赞，再次单击红心就会取消点赞实现思路：给最外层的布局添加双击事件，双击之后点赞，变成红色心。如果已经被点赞，那么还是修改为红色心，相当于不做任何处理。给图片添加单击事件。...代码实现：上面布局文件不变，MainAbilitySlice 如下：给布局添加双击事件，因为再次双击不会取消点赞，所以把else代码里设置为红色后就把 flag 取反去掉，就不会出现再次双击取消点赞了

2K2 0

点赞功能，你用 MySQL 还是 Redis ？

作者：一起web编程链接：www.toutiao.com/i6825148720728769028 点赞功能是目前app开发基本的功能今天我们就来聊聊点赞、评论、收藏等这些场景的db数据库设计问题...我们先来看看场景的需求：显示点赞数量判断用户是否点过赞，用于去重，必须的判断显示个人点赞列表，一般在用户中心显示文章点赞列表我们先看一下头条和微博的例子 [897b7172-a444-4a0e-a984...查询文章的点赞用户 select user_id from star where post_id=? 点赞数量可以通过定时异步统计更新到post和user 表中。...这增加了存储空间和维护工作量，还可能有一致性问题。...前几天写的一篇文章，受到众多同行的热情回复，能和众多同行一起交流，深感荣幸！对于工程类问题，没有标准的方案，一千个人有一千个方案，哪个最适合你只有你自己知道！期待你更好的思路和方法。

6704 0

Redis位图实现点赞签到相关功能

前言对于我们平时的一些社区应用，如微博，知乎，掘金等应用点赞，评论这类功能是不可或缺的，例如点赞功能我们其实是可以通过 mysql 去做实现的，但是每次点赞都去实时改库可以想象一下当遇到一个热点文章例如...字节的内容也就是2^32b； ❝2^(9(512)+10(1024)+10(1024)+3(8b=1B))=2^32b ❞ 应用场景：用户签到用户在线状态统计活跃用户各种状态值自定义布隆过滤器点赞功能...integer) 0 //查找 127.0.0.1:6379> getbit a 2 (integer) 1 //统计 127.0.0.1:6379> bitcount a (integer) 2 点赞功能...点赞功能我这里的处理方式是异步改库，点完赞之后异步修改数据库，不要求实时处理结果其实可以用定时任务去批量改库（需要存一定时间内的 postId 和 userId 索引关系）； @Override public...一个简单的位图实现点赞等功能就实现了，大家一个举一反三哈，玩法还是很多的，大家也可以根据自己的需求去做优化，希望可以对大家有帮助，有不对的地方希望大家可以提出来的，共同成长。 ❞

1K1 0

typecho点赞实现代码分享

archive->request->do_action){ likeup($archive->request->likeup,$archive->request->do_action); exit; } } //点赞函数...$cid, ""); } echo $num; } post请求参数 likeup：文章id do_action：do或者undo likeup是指定文章id的，do_action是点赞动作，动作为do...为点赞，undo为取消点赞！...前端方面前端方面需要写ajax请求接口的函数，然后在post.php里加入按钮，点击按钮传递文章id与动作触发相关点赞或者取消点赞效果。...关于点赞数在post.php里添加cid,'kkb'); ?>即可显示点赞数，同时ajax动作请求完成也会返回点赞数。 linkCard('.post-content','0');

6382 0

点赞模块设计：Redis缓存 + 定时写入数据库实现高性能点赞功能

点赞功能在很多系统中都有，但别看功能小，想要做好需要考虑的东西还挺多的。点赞、取消点赞是高频次的操作，若每次都读写数据库，大量的操作会影响数据库性能，所以需要做缓存。...项目需求需要查看都谁点赞了，所以要存储每个点赞的点赞人、被点赞人，不能简单的做计数。...将点赞人 id 和被点赞人 id 作为键，两个 id 中间用 :: 隔开，点赞状态作为值。所以如果用户点赞，存储的键为：likedUserId::likedPostId，对应的值为 1 。...= "MAP_USER_LIKED_COUNT"; /** * 拼接被点赞的用户id和点赞的人的id作为key。...以上就是点赞功能的设计与实现，不足之处还请各位大佬多多指教。

1.9K6 0

ajax和vue.js

这样只是为了让ajax看的干净一点，然后便于维护一些而已。...允许自定义html属性，已完成自己需要的功能。满足k=‘xx’而且名称符合标识符规则。访问自定义html属性时用attr这个。和prop用法完全一样。...自己写ajax的时候一定要注意括号，比如done和fail是跟在ajax后面的括号，如果显示错误，很大可能是这个问题，练习的时候在这个地方多次出现问题，不报错，但是有部分功能不出效果。...只需要控制好数据和页面视图，中间的所有处理是viewmodel相关的）后端将vue当做函数库来用即可 vue.js 和vue.mini.js（用的到的） mini做过压缩开发的时候导入vue.js，...条件成立的命令:条件不成立的命令三元运算符是js中的知识点，原生js就有 5.2vue控制HTML属性超链接中的href在vue中可以不写死具体的路径和网址。

10.4K2 1

点赞模块设计 - Redis缓存 + 定时写入数据库实现高性能点赞功能

源码地址：https://github.com/cachecats/coderiver 点赞是作为整个系统的一个小模块，代码在 user-service 用户服务下。...点赞功能在很多系统中都有，但别看功能小，想要做好需要考虑的东西还挺多的。点赞、取消点赞是高频次的操作，若每次都读写数据库，大量的操作会影响数据库性能，所以需要做缓存。...将点赞人 id 和被点赞人 id 作为键，两个 id 中间用 :: 隔开，点赞状态作为值。所以如果用户点赞，存储的键为：likedUserId::likedPostId，对应的值为 1 。...id和点赞的人的id作为key。...以上就是点赞功能的设计与实现，不足之处还请各位大佬多多指教。如有更好的实现方案欢迎在评论区交流… 项目地址：https://github.com/cachecats/coderiver

2.2K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭