评论区点赞功能用ajax怎么实现，有2层循环

### 回答1：
实现评论区点赞功能，可以使用AJAX实现异步请求。具体实现步骤如下：

1. 在页面上为点赞按钮添加一个点击事件，并且在事件处理程序中使用AJAX发送异步请求：

$('.like-btn').click(function() {
  var commentId = $(this).data('comment-id');
  $.ajax({
    url: '/like-comment',
    type: 'POST',
    data: { commentId: commentId },
    success: function(res) {
      // 更新点赞数
      $('.like-count[data-comment-id="' + commentId + '"]').text(res.likes);
    },
    error: function(err) {
      console.error(err);
    }
  });
});

2. 服务器接收到请求后，查询数据库并更新评论的点赞数，然后将更新后的点赞数返回给客户端：

app.post('/like-comment', function(req, res) {
  var commentId = req.body.commentId;
  // 查询数据库并更新点赞数
  var likes = 100; // 假设查询到的点赞数为100
  res.json({ likes: likes });
});

由于评论区可能会有多个评论，因此需要使用两层循环来遍历所有的评论和点赞按钮。示例代码如下：

<!-- 评论列表 -->
<ul class="comment-list">
  <!-- 第一条评论 -->
  <li>
    <div class="comment-body">
      <p>这是第一条评论</p>
      <div>
        <!-- 点赞按钮 -->
        <button class="like-btn" data-comment-id="1">点赞</button>
        <!-- 点赞数 -->
        <span class="like-count" data-comment-id="1">100</span>
      </div>
    </div>
    <!-- 第一条评论的回复列表 -->
    <ul class="comment-reply-list">
      <!-- 第一条回复 -->
      <li>
        <div class="comment-body">
          <p>这是第一条回复</p>
          <div>
            <!-- 点赞按钮 -->
            <button class="like-btn" data-comment-id="2">点赞</button>
            <!-- 点赞数 -->
            <span class="like-count" data-comment-id="2">50</span>
          </div>
        </div>
      </li>
      <!-- 第二条回复 -->
      <li>
        <div class="comment-body">
          <p>这是第二条回复</p>
          <div>
            <!-- 点赞按钮 -->
            <button class="like-btn" data-comment-id="3">点赞</button>
            <!-- 点赞数 -->
            <span class="like-count" data-comment-id="3">20</span>
          </div>
        </div>
      </li>
    </ul>
  </li>
  <!-- 第二条评论 -->
  <li>
    <div class="comment-body">
      <p>这是第二条评论</p>
      <div>
        <!-- 点赞按钮 -->
        <button class="like-btn" data-comment-id="4">点赞</button>
        <!-- 点赞数 -->
        <span class="like-count" data-comment-id="4">10</span>
      </div>
    </div>
  </li>
</ul>

<script>
  // 遍历所有的点赞按钮
  $('.like-btn').each(function() {
    // 为每个点赞按钮添加点击事件
    $(this).click(function() {
      var commentId = $(this).data('comment-id');
      $.ajax({
        url: '/like-comment',
        type: 'POST',
        data: { commentId: commentId },
        success: function(res) {
          // 更新点赞数
          $('.like-count[data-comment-id="' + commentId + '"]').text(res.likes);
        },
        error: function(err) {
          console.error(err);
        }
      });
    });
  });
</script>

这样就可以实现评论区点赞功能，并且支持多个评论和回复。

### 回答2：
评论区点赞功能使用Ajax实现，需要进行二层循环。

首先，需要在页面上展示评论列表，每个评论条目都需要包含一个点赞按钮。当用户点击点赞按钮时，会发起Ajax请求。

第一层循环是遍历所有评论条目，为每个点赞按钮绑定点击事件。当点击点赞按钮时，触发点击事件。

点击事件中，将获取到当前点击的评论的唯一标识（比如评论的ID），作为参数传递给Ajax请求。

接下来，发起Ajax请求，将评论的唯一标识作为参数传递给后端。后端根据评论的唯一标识，对该评论的点赞数进行更新操作。

在Ajax的success回调函数中，更新该评论条目的点赞数，在页面上展示点赞数的变化。

第二层循环是循环遍历返回的评论数据，为每个评论条目的点赞按钮赋予正确的点赞数和状态。根据后端返回的数据，判断当前用户是否已经点赞了该评论，如果已经点赞，则将点赞按钮样式修改为已点赞状态。

通过以上两层循环，实现了评论区点赞功能。用户可以点击点赞按钮对评论进行点赞，通过Ajax请求将点赞信息传递给后端进行处理，并及时更新页面上的点赞数及状态。

### 回答3：
评论区点赞功能可以使用Ajax来实现。Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下与服务器进行数据交互的技术，通过它可以实现网页的异步更新。

针对评论区点赞功能，可以通过以下步骤来使用Ajax实现：

1. 在页面中，为每个评论的点赞按钮添加一个点击事件。

2. 当用户点击点赞按钮时，通过Ajax向服务器发送请求，告知服务器用户的点赞行为。

3. 服务器接收到请求后，将用户的点赞记录更新到数据库中。可以使用2层循环遍历评论区的所有评论，找到用户点赞的评论。

4. 服务器处理完成后，返回一个响应给前端，告知点赞行为是否成功。

5. 前端接收到服务器的响应后，根据响应结果更新页面显示。可以通过修改点赞按钮的样式，比如改变按钮的颜色或样式，来表示点赞已成功。

需要注意的是，为了避免页面频繁请求服务器，在用户点击点赞按钮后可以将按钮设置为不可点击状态，等待服务器的响应返回后再将按钮设置为可点击状态。

此外，为了提高性能可以使用2层循环来遍历评论区的评论，第一层循环用于遍历每一个评论，第二层循环用于判断当前评论是否是用户点赞的评论。这样可以减少数据库的查询次数，提高效率。

总结而言，使用Ajax可以实现评论区点赞功能，通过向服务器发送请求和接收响应来实现点赞记录的更新和页面的异步更新，使用2层循环可以提高性能和效率。