宜宾阿里云代理商：ajax点赞代码

luotuoemo • 2023年12月31日 18:10 • 阿里云 • 阅读 76

由于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