Javascript 为用户自动添加like

我想添加用户喜欢在页面加载上发布，也就是说，如果用户已经喜欢该帖子，但它不起作用，我想让喜欢的botton show成为喜欢的 这是我的ajax代码

for (var l = 0; l < 5; l++) {
          this_comment_id = $('#like_check_'+l).attr('data-id');
              $.ajax({  
                    url:"comment_post.php",  
                    type: 'POST', 
                    data:{comment_check:this_comment_id},  
                    dataType: 'text',  
                    success:function(data)
                    {  
                          if (data.search("ok") > -1) {
                                $('#like_check_'+l).addClass("red_heart");
                          }else if(data.search("unliked") > -1){
                                $('#like_check_'+l).removeClass("red_heart");
                          }
                    }
              })
    }

---

}

因为我真的不使用jQuery，所以试图用它来回答这个问题是愚蠢的，这样会让人误解，这就是为什么我在这里用vanilla Javascript来回答这个问题。不知道表模式、像_post这样的函数做了什么，或者某人如何不同于某些东西，都会提出问题，但在这里，做出某些假设可以忽略这一点

如果您稍微修改HTML以删除实际上不需要的ID属性

<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='1' data-toggle='tooltip' data-placement='top' title='I like it'></i>
<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='2' data-toggle='tooltip' data-placement='top' title='I like it'></i>
<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='3' data-toggle='tooltip' data-placement='top' title='I like it'></i>
<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='4' data-toggle='tooltip' data-placement='top' title='I like it'></i>
<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='5' data-toggle='tooltip' data-placement='top' title='I like it'></i>

使用所有相关的ID，您可以向服务器发出单个Ajax查询，服务器将使用这些ID处理用户以前喜欢的内容。因为下面是基本的jQuery，只是对原始jQuery稍加修改，所以我在这里使用它，而不是使用XMLHttpRequest或Fetch

检查数据库的PHP脚本：

<?php

    session_start();
    
    if( isset( $_POST['comment_check'] ) ) {
        
        $payload=[];
        $ids=explode( ',', $_POST['comment_check'] );
        
        $sql='select `comment_id` from `comment_like` where `liker_id`=? and `liked`="Y"';
        $stmt=$con->prepare( $sql );
        $stmt->bind_param( 's', $_SESSION['user_id'] );
        $status=$stmt->execute();
        $stmt->bind_result( $cid );
        
        
        $payload['status']=$status;
        $payload['user_id']=$_SESSION['user_id'];
        $payload['liked']=[];
        
        
        while( $stmt->fetch() ){
            if( in_array( $cid, $ids ) ) $payload['liked'][]=$cid;
        }
    
        
        header('Content-Type: application/json');
        exit( json_encode( $payload ) );
    }

?>
      

---

警告：您完全可以使用参数化的预处理语句，而不是手动生成查询。它们由或提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行。当你可以轻松地使用一个查询时，为什么要发出5个ajax请求？@ProfessorAbronsius我如何使用一个ajax查询

<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='1' data-toggle='tooltip' data-placement='top' title='I like it'></i>
<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='2' data-toggle='tooltip' data-placement='top' title='I like it'></i>
<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='3' data-toggle='tooltip' data-placement='top' title='I like it'></i>
<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='4' data-toggle='tooltip' data-placement='top' title='I like it'></i>
<i class='fas fa-heart float-right p-1 my-1 mr-3' data-id='5' data-toggle='tooltip' data-placement='top' title='I like it'></i>

var iCol=document.querySelectorAll( 'i[data-id]' );
var ids=[];

iCol.forEach( i=>{
    ids.push( i.dataset.id )
});

$.ajax({  
    url:'comment_post.php',  
    type:'POST', 
    data:{ comment_check:ids },  // send the collected IDs
    dataType:'text',  
    success:function(json){
        json.liked.forEach( id => {
            document.querySelector('i[ data-id="'+id+'" ]').classList.add('red_heart')
        })
    }
});

<?php

    session_start();
    
    if( isset( $_POST['comment_check'] ) ) {
        
        $payload=[];
        $ids=explode( ',', $_POST['comment_check'] );
        
        $sql='select `comment_id` from `comment_like` where `liker_id`=? and `liked`="Y"';
        $stmt=$con->prepare( $sql );
        $stmt->bind_param( 's', $_SESSION['user_id'] );
        $status=$stmt->execute();
        $stmt->bind_result( $cid );
        
        
        $payload['status']=$status;
        $payload['user_id']=$_SESSION['user_id'];
        $payload['liked']=[];
        
        
        while( $stmt->fetch() ){
            if( in_array( $cid, $ids ) ) $payload['liked'][]=$cid;
        }
    
        
        header('Content-Type: application/json');
        exit( json_encode( $payload ) );
    }

?>