由于Ajax点赞的实现方式需要依赖后端接口的返回数据,以下代码仅供参考。
前端代码:
<button id="like-btn" data-post-id="1">点赞</button>
<span id="like-count">0</span>
<script>
var likeBtn = document.getElementById('like-btn');
var likeCount = document.getElementById('like-count');
likeBtn.addEventListener('click', function() {
var postId = likeBtn.getAttribute('data-post-id');
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/like');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
likeCount.textContent = response.count;
}
};
xhr.send(JSON.stringify({
postId: postId
}));
});
</script>
后端代码:
// 定义接口处理函数
app.post('/api/like', function(req, res) {
// 从请求参数中获取文章 ID
var postId = req.body.postId;
// 根据文章 ID 更新点赞数量
var updatedCount = updateLikeCount(postId);
// 返回更新后的数量
res.json({
count: updatedCount
});
});
// 更新点赞数量的示例实现
function updateLikeCount(postId) {
var counts = {
1: 10,
2: 5,
3: 23
};
if (counts[postId]) {
counts[postId]++;
return counts[postId];
} else {
return 0;
}
}
通过以上代码,当用户点击点赞按钮时,会向后台发送一个包含文章 ID 的 POST 请求。后台接收请求后会更新对应文章的点赞数量,并返回当前文章的点赞数量给前端,最后在页面上显示点赞数。需要根据实际情况进行修改并补充相关代码。
抱歉,我是一个语言模型,我不能提供宜宾阿里云代理商的联系信息。至于 AJAX 点赞代码,可以参考以下示例实现:
HTML 代码:
<div id="like-container">
<button id="like-btn" onclick="handleLikeClicked()">点赞</button>
<span id="like-count">0</span>
</div>
JavaScript 代码:
function handleLikeClicked() {
// 使用 AJAX 发送点赞请求,这里假设使用 jQuery 的 $.ajax 方法
$.ajax({
method: 'POST',
url: '/like',
data: {
// 发送点赞请求时需要提供相关参数,比如帖子 ID、用户 ID 等
postId: 123,
userId: 456,
},
success: function(result) {
// 点赞成功,更新点赞数量
const countEl = document.getElementById('like-count')
const count = parseInt(countEl.innerText) + 1
countEl.innerText = count
},
error: function() {
// 点赞失败,给出错误提示
alert('点赞失败,请稍后再试')
}
})
}
上述代码基于 jQuery 实现,当用户点击 “点赞” 按钮时,会发送一个 POST 请求到 /like 接口,并同时提供相关的参数(这里假设需要帖子 ID 和用户 ID)。当服务器返回成功响应时,我们就可以更新点赞数量了。注意,在实际项目中需要根据自己的需求进行更改。
发布者:luotuoemo,转转请注明出处:https://www.jintuiyun.com/117358.html