实时论坛点赞按钮点击返回最后消息ID问题及修复方案咨询

问题描述 #

开发带用户实时更新功能的论坛项目，每条消息设有「点赞（positive）」和「点踩（negative）」按钮，点击按钮时希望获取对应消息的ID，但当前代码总是返回最后一条消息的ID。相关代码如下：

前端定时加载数据代码 #

var myVar = setInterval(LoadData, 2000);

http_request = new XMLHttpRequest();

function LoadData(){
$.ajax({
 url: 'view.php',
 type: "POST",
 dataType: 'json',
 success: function(data) {
  $('#MyTable div').empty();
  for (var i=0; i<data.length; i++) {
    var commentId = data[i].iddisc;
    if(data[i].parent_comment == 0){

      var date = new Date(data[i].datePubli);
      var hourCycle = date.toLocaleString('es-ES', {hourCycle: 'h23' });

     // 点赞按钮的生成代码
     var row = $('<div class="info-box"><img src="./css/escudos/' + data[i].equipo + '.png" width="25px" height="25px" /><p>' + data[i].username + '</p><p id="date-p"> '+ hourCycle +'</p></div><div class="text-box"><p>' + data[i].post + '</p><div class="posneg"><form name="formpositivo" method="post"><input type="hidden" class="form-posi" name="posCommentid" value="' + commentId + '"><input type="button" id="positivo" name="positivo" class="suma" value="+"></form></div></div>');
    $('#record').append(row);
   }
 }
},
 error: function(jqXHR, textStatus, errorThrown){
 alert('Error: ' + textStatus + ' - ' + errorThrown);
}
});

按钮点击事件代码 #

// 传递数据
$(document).ready(function() {
$(document).on('click', '#positivo', function() {
    var posi = document.forms["formpositivo"]["posCommentid"].value;
        $.ajax({
            url: "positivo.php",
            type: "POST",
            data: {
              posi: posi,
            },
            cache: false,
            success: function(dataResult){
                var dataResult = JSON.parse(dataResult);
                if(dataResult.statusCode==300){
                    alert(posi);
                }
            }
        });
});
});

后端view.php代码 #

include './database.php';
$data = array();
$sql = "SELECT *, discussion.id as iddisc, users.id as usersid FROM discussion INNER JOIN users ON discussion.id_user=users.id ORDER BY discussion.id desc";
$result = $conn->query($sql);
while($row = $result->fetch()){
    array_push($data, $row);
    array_push($data);
}

echo json_encode($data);
$conn = null;
exit();

解决方法 #

1. 修复重复ID与表单名称问题（核心原因） #

所有点赞按钮使用了同一个id="positivo"，所有表单共用name="formpositivo"，DOM中ID和表单名称必须唯一，导致获取值时只会拿到最后一个元素的内容。修改如下：

修改前端定时加载代码：

将按钮的id="positivo"改为class="positivo"，去掉表单的name属性（不需要通过名称定位表单）：

// 修改后的row生成代码
var row = $('<div class="info-box"><img src="./css/escudos/' + data[i].equipo + '.png" width="25px" height="25px" /><p>' + data[i].username + '</p><p id="date-p"> '+ hourCycle +'</p></div><div class="text-box"><p>' + data[i].post + '</p><div class="posneg"><form method="post"><input type="hidden" class="form-posi" name="posCommentid" value="' + commentId + '"><input type="button" class="positivo suma" value="+"></form></div></div>');

修改按钮点击事件代码：

绑定到class="positivo"，通过点击按钮的上下文找到对应表单中的隐藏域值，而不是通过全局表单名称获取：

$(document).ready(function() {
$(document).on('click', '.positivo', function() {
    // 通过当前按钮找到所在表单内的隐藏域
    var posi = $(this).closest('form').find('.form-posi').val();
        $.ajax({
            url: "positivo.php",
            type: "POST",
            data: {
              posi: posi,
            },
            cache: false,
            success: function(dataResult){
                var dataResult = JSON.parse(dataResult);
                if(dataResult.statusCode==300){
                    alert(posi);
                }
            }
        });
});
});

2. 修复后端数据返回错误 #

后端view.php中有一行多余的array_push($data);，没有传入参数会往数组中添加null，导致前端数据结构异常，需要删除该行：

include './database.php';
$data = array();
$sql = "SELECT *, discussion.id as iddisc, users.id as usersid FROM discussion INNER JOIN users ON discussion.id_user=users.id ORDER BY discussion.id desc";
$result = $conn->query($sql);
while($row = $result->fetch()){
    array_push($data, $row);
    // 删除下面这行多余代码
    // array_push($data);
}

echo json_encode($data);
$conn = null;
exit();

3. 优化定时加载的DOM操作（可选） #

当前代码中$('#MyTable div').empty();是清空#MyTable下的所有div，但新内容是追加到#record中，可能导致重复渲染。建议改为清空#record：

success: function(data) {
  $('#record').empty(); // 改为清空目标容器
  for (var i=0; i<data.length; i++) {
    // ... 原有代码
  }
}

内容的提问来源于stack exchange，提问作者Marcos Alborelli