查看来自多个元素的 AJAX 请求的响应数据

Question

我的网站中有一个 like 系统。每条消息都有一个赞按钮和旁边的计数器。
现在，当有人点击 Like 按钮时，它应该立即变为 1，如果另一个用户点击相同的消息，它会变为 2，以此类推。

我创建了执行此操作所需的 AJAX 函数，但我使用的是 document.getElementById，它只检索找到的第一个实例并查看来自 ajax 请求的响应。

我怎样才能使它可以查看每条消息？

这是我的 AJAX 请求：

jQuery(document).ready(function($){
    $('.msg-icon').on('click', function(e){
    e.preventDefault(); 
 
    var reply_id = $(this).find('input[name="replymsg"]').val();
   var request = reply(reply_id); 
   
    request.done(function() { 
      checkLikes(reply_id);
    });
  });
});
   
  
function reply(reply_id) {
  return $.ajax({ 
    data: reply_id, 
    type: "post", 
    url: "replyfavorite.php?replymsg="+reply_id, 
  });
}

function checkLikes(reply_id) {
  return $.ajax({
    data: { reply: reply_id },
    type: "get",
    url: "checkLikes.php?reply=" + reply_id,
    success: function(data) {
      document.getElementById('likesCount').innerHTML = data; //what can i change here to make the data go to each clicked button?
    }
  });
}

这是用户为每条消息单击的我的 html 按钮：

<a href="" class="msg-icon" >

<i class="fas fa-heart fa-lg" id="favBtn" style="color: #e74f4e !important;"  >
  <span id="likesCount"><?php echo $row3['likes_count'] ?>
</span></i></a>

代码运行良好我唯一的问题是如何让响应仅转到单击的消息按钮。

Answer 1

如您所见，ID 应该是唯一的。而不是使用document.getElementById('likesCount').innerHTML = data;
使用data-* attribute

即：

<span data-id="536">12</span>

比jQuery里面的success更喜欢：

success: function(data) {
  $(`[data-id="${reply_id}"]`).text(data)
}

这样会用最新的点赞数更新页面上任意数量的data-id=""元素。

PS：如果你想让你的计数 “活” - 您可以使用https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

，而不是使用仅往返一次的 AJAX（请求 → 响应）

通过使用 Web Sockets，您可以确保在任何客户端和您的服务器之间进行初始握手，而不是在两者之间共享小数据包 - 同时用于多个客户端。这样一来，您就不需要重复 AJAX 间隔 - 您的所有客人都会看到喜欢的更改值“自动”。

Answer 2

既然你使用jquery，为什么不使用$("#likesCount").each(function(){ . . . . .. });循环遍历每个项目，在每个部分中，您执行 ajax 请求以查找当前值，可能使用 $.post() 或 $.get()，具体取决于您的 api。

更新：（改进我的答案） 我了解文档中元素 id 的唯一性。

我真正想说的是，您可能想要更改如何查看/搜索要包含在每个跨度内的详细信息的方法。在那里，您可以通过使用 Class 或自定义属性对 span 对象进行分组来识别它们，然后使用 $.each 函数对其进行迭代。没有单一的方法可以完成事情，这只是关于如何使用正确的内容更新每个元素的想法。