While循环仅在与AJAX PHP一起使用时更新第一行数据

时间:2020-03-10 11:38:02

标签: php ajax

我的PHP代码中有一个while循环,可获取帖子的数据,例如张贴者的姓名,时间等。
问题是,当我尝试更新客户端等任何数据时,它仅适用于显示的第一行。仅当我使用AJAX时才会出现此问题,使用简单格式不会触发此问题。

真实场景:当我喜欢第一篇文章时,一切都很好,但是当我喜欢第二篇文章时,它几乎不起作用,有时会使用第一篇文章$ POST_ID更新数据。

我应该使用其他循环还是什么?

Index.php

while ($row = mysqli_fetch_assoc($result)) {
$user_id = $row['user_id'];
$sql = "SELECT * FROM users where id=$user_id";
$results = $connect->query($sql);
$user_d = mysqli_fetch_array($results);
$post_id = $row['post_id'];
$date = strtotime($row['published_at']);
?>

<div class="posts" id="post_<?php echo $row['post_id']?>">
<div class="pd20px">
 <a href="profile.php?id=<?php echo $user_d['id']?>">
   <div class="profile_img_on_post_div">
     <img class="profile_img_on_post" src="<?php echo $user_d['profile_img'] ?>">
   </div>
   <div class="poster_info">
     <b>
       <span>
         <?php echo $user_d['username'] ?>
       </span>
     </b>
     <?php 
if ($user_d['verified'] == 'true') {
?>
     <img src="img/verified.png" alt="Verified User" class="verified_on_post">
     <?php
}
?>
     <span style="font-weight: 400; font-size: 15px; color: #696969">
       <?php if (empty($row['is_this_a_post'])) {
if ($user_d['gender'] == 'male') {
echo ' updated his profile picture.';
}elseif ($user_d['gender'] == 'female') {
echo ' updated her profile picture.';
}
} ?>
     </span>
     <br>
     </a>
   <span style="font-size: 12px; color:#696969 ">
     <?php  echo date('d F, Y' , strtotime($row['published_at'])) ?>
   </span>
   <span style="float: right;">
     <?php 
if ($row['user_id'] == $c_user_id) {                     
?>
     <form method="POST" action="inc/delete_post.php">
       <button class="delete" name="delete" >Delete
       </button>
       <input type="text" name="post_id" hidden="true" value="<?php echo $row['post_id']  ?>">
     </form>
     <?php
}
?>
   </span>
   </div>
</div>
<div>
 <a href="post.php?id=<?php echo $post_id?>">
   <img width="100%" height="auto" src="<?php echo $row['img_location'] ?>">
 </a>
</div>
<div class="post_likes_info">
 <?php 
$result1 = mysqli_query($connect , "SELECT * FROM likes where  post_id=$post_id AND liker_id=$c_user_id");
$already_like = mysqli_num_rows($result1) ;
if ($already_like == 1) { ?>

   <button class="unlikebtn" name="unlike" id="unlike_btn">
     <span class="like_toggle">
       <svg aria-label="Unlike" class="like_ico" fill="#ed4956" height="24" viewBox="0 0 48 48" width="24">
         <path clip-rule="evenodd" d="M35.3 35.6c-9.2 8.2-9.8 8.9-11.3 8.9s-2.1-.7-11.3-8.9C6.5 30.1.5 25.6.5 17.8.5 9.9 6.4 3.5 13.7 3.5 20.8 3.5 24 8.8 24 8.8s3.2-5.3 10.3-5.3c7.3 0 13.2 6.4 13.2 14.3 0 7.8-6.1 12.3-12.2 17.8z" fill-rule="evenodd">
         </path>
       </svg>
     </span>
   </button>
   <input type="text" name="post_id" id="post_u_id" hidden="true" value="<?php echo $post_id ?>">
   <a href="post.php?id=<?php echo $post_id?>">
     <svg aria-label="Comment" class="comment_ico " fill="#262626" height="24" viewBox="0 0 48 48" width="24">
       <path clip-rule="evenodd" d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 44.5 12.7 44.5 24z" fill-rule="evenodd">
       </path>
     </svg>
   </a>

 <?php } elseif($already_like == 0){  ?>

   <button name="like" class="likebtn" id="like_btn" data-itemID="<?php echo $post_id?>">
     <span class="like_toggle">
       <svg aria-label="Like" class="like_ico" fill="#262626" height="24" viewBox="0 0 48 48" width="24">
         <path clip-rule="evenodd" d="M34.3 3.5C27.2 3.5 24 8.8 24 8.8s-3.2-5.3-10.3-5.3C6.4 3.5.5 9.9.5 17.8s6.1 12.4 12.2 17.8c9.2 8.2 9.8 8.9 11.3 8.9s2.1-.7 11.3-8.9c6.2-5.5 12.2-10 12.2-17.8 0-7.9-5.9-14.3-13.2-14.3zm-1 29.8c-5.4 4.8-8.3 7.5-9.3 8.1-1-.7-4.6-3.9-9.3-8.1-5.5-4.9-11.2-9-11.2-15.6 0-6.2 4.6-11.3 10.2-11.3 4.1 0 6.3 2 7.9 4.2 3.6 5.1 1.2 5.1 4.8 0 1.6-2.2 3.8-4.2 7.9-4.2 5.6 0 10.2 5.1 10.2 11.3 0 6.7-5.7 10.8-11.2 15.6z" fill-rule="evenodd">
         </path>
       </svg>
     </span>
   </button>
   <a href="post.php?id=<?php echo $post_id?>">
     <svg aria-label="Comment" class="comment_ico " fill="#262626" height="24" viewBox="0 0 48 48" width="24">
       <path clip-rule="evenodd" d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 44.5 12.7 44.5 24z" fill-rule="evenodd">
       </path>
     </svg>
   </a>
   <?php }  ?>
   <input type="text" name="post_id" id="post_u_id" value="<?php echo $post_id ?>">

</div>
<?php $results = mysqli_query($connect , "SELECT * FROM likes where post_id=$post_id");
?>
<span class="like_count">
 <?php echo mysqli_num_rows($results); ?> Likes
</span>
<br>
<span class="poster_name">
 <?php echo $user_d['username']?>
</span>
<span id="poster_description" class="poster_description">
 <?php echo $row['post_text']?>
</span>
<div class="comment">
 <?php 
$r  = mysqli_query($connect , "SELECT * FROM comments where post_id = $post_id ");   
$no_of_cmts =mysqli_num_rows($r) ;
if ( $no_of_cmts > 2) { ?>
 <a href="post.php?id=<?php echo $post_id?>" id="vac">View All 
   <?php echo $no_of_cmts ?> Commnets
 </a>
 <br>
 <?php }
$comments  = mysqli_query($connect , "SELECT * FROM comments where post_id = $post_id limit 2");   
while ( $cmts = $comments->fetch_array(MYSQLI_ASSOC)){ 
$commenter_id = $cmts['commenter'];
$user = mysqli_query($connect , "SELECT * FROM users WHERE id=$commenter_id");
$users_data = mysqli_fetch_array($user);
?>
 <span class="name_cmt">
   <?php echo $users_data['username'];?> 
 </span>
 <span id="comment_content">
   <?php echo $cmts['comment_content'];?>
 </span>
 <br>

 <?php }
?>
 <?php 
include_once "inc/time.php";
$time = $row['published_at'];?>
 <span class="time"> 
   <?php echo time_elapsed_string($time); ?>
 </span>

   <div class="add_a_comment">

       <div class="add_comment_section">
         <span class="hor-line">
         </span>
         <div>
           <textarea contenteditable aria-label="Add a comment…" placeholder="Add a comment…" class="addcomment_ta" autocomplete="off" autocorrect="off" id="comment_content" name="comment_content" id="editable_comment">
           </textarea>
         </div>
         <div class="post_btn">
           <button  id="btn_comment" >POST
           </button>
         </div>
       </div>
       <input type="text" name="post_id" id="post_id" hidden="true" value="<?php echo $row['post_id']  ?>">

   </div>
   </div>
</div>

<br>
<?php     
}
echo "<h2 class=\"center\" style=\"margin-bottom:10px;\">No More Post Found :(</h2>";
?>

AJAX

 $(document).ready(function(){
        $("#btn_comment").click(function(){
            $.post("inc/add_comment.php" , 
            {
                comment_content:$("#comment_content").val(),
                post_id:$("#post_id").val()

            },
            function(data){
                alert("data");
            })

        });
    });
    $(document).ready(function(){
        $("#like_btn").click(function(){
             itemID = $(this).data("itemID");
            $.post("inc/like.php" , 
            {
                post_u_id:itemID

            },
            function(data){
            })

        });
    });
    $(document).ready(function(){
        $("#unlike_btn").click(function(){
            $.post("inc/unlike.php" , 
            {
                post_id:$("#post_u_id").val()


            },
            function(data){
            })

        });
    });

Like.php


    <?php 
    session_start();
    include 'db.php';
    $id=$_SESSION['c_user_id'];
        $results = mysqli_query($connect , "SELECT * FROM users WHERE id=$id");
        $row = mysqli_fetch_array($results);
        $c_user_id = $row['id'];
        $post_u_id = $_POST['post_u_id'];
        $result = mysqli_query($connect , "INSERT INTO likes (liker_id , post_id ) VALUES ('$c_user_id ', '$post_u_id')");
        echo "done";

     ?>

1 个答案:

答案 0 :(得分:0)

这是一般想法。我不知道我是否抓住了所有问题。

如果而不是:

if ($already_like == 1) { ?>

<button class="unlikebtn" name="unlike" id="unlike_btn">
  <span class="like_toggle">
    <svg aria-label="Unlike" class="like_ico" fill="#ed4956" height="24" viewBox="0 0 48 48" width="24">
      <path clip-rule="evenodd" d="M35.3 35.6c-9.2 8.2-9.8 8.9-11.3 8.9s-2.1-.7-11.3-8.9C6.5 30.1.5 25.6.5 17.8.5 9.9 6.4 3.5 13.7 3.5 20.8 3.5 24 8.8 24 8.8s3.2-5.3 10.3-5.3c7.3 0 13.2 6.4 13.2 14.3 0 7.8-6.1 12.3-12.2 17.8z" fill-rule="evenodd">
      </path>
    </svg>
  </span>
</button>
<input type="text" name="post_id" id="post_u_id" hidden="true" value="<?php echo $post_id ?>">
<a href="post.php?id=<?php echo $post_id?>">
  <svg aria-label="Comment" class="comment_ico " fill="#262626" height="24" viewBox="0 0 48 48" width="24">
    <path clip-rule="evenodd" d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 44.5 12.7 44.5 24z" fill-rule="evenodd">
    </path>
  </svg>
</a>

 <?php } elseif($already_like == 0){  ?>

   <button name="like" class="likebtn" id="like_btn" data-itemID="<?php echo $post_id?>">
     <span class="like_toggle">
       <svg aria-label="Like" class="like_ico" fill="#262626" height="24" viewBox="0 0 48 48" width="24">
         <path clip-rule="evenodd" d="M34.3 3.5C27.2 3.5 24 8.8 24 8.8s-3.2-5.3-10.3-5.3C6.4 3.5.5 9.9.5 17.8s6.1 12.4 12.2 17.8c9.2 8.2 9.8 8.9 11.3 8.9s2.1-.7 11.3-8.9c6.2-5.5 12.2-10 12.2-17.8 0-7.9-5.9-14.3-13.2-14.3zm-1 29.8c-5.4 4.8-8.3 7.5-9.3 8.1-1-.7-4.6-3.9-9.3-8.1-5.5-4.9-11.2-9-11.2-15.6 0-6.2 4.6-11.3 10.2-11.3 4.1 0 6.3 2 7.9 4.2 3.6 5.1 1.2 5.1 4.8 0 1.6-2.2 3.8-4.2 7.9-4.2 5.6 0 10.2 5.1 10.2 11.3 0 6.7-5.7 10.8-11.2 15.6z" fill-rule="evenodd">
         </path>
       </svg>
     </span>
   </button>
   <a href="post.php?id=<?php echo $post_id?>">
     <svg aria-label="Comment" class="comment_ico " fill="#262626" height="24" viewBox="0 0 48 48" width="24">
       <path clip-rule="evenodd" d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 44.5 12.7 44.5 24z" fill-rule="evenodd">
       </path>
     </svg>
   </a>
   <?php }  ?>

<div class="add_a_comment">

    <div class="add_comment_section">
      <span class="hor-line">
      </span>
      <div>
        <textarea contenteditable aria-label="Add a comment…" placeholder="Add a comment…" class="addcomment_ta" autocomplete="off" autocorrect="off" id="comment_content" name="comment_content" id="editable_comment">
        </textarea>
      </div>
      <div class="post_btn">
        <button  id="btn_comment" >POST
        </button>
      </div>
    </div>
    <input type="text" name="post_id" id="post_id" hidden="true" value="<?php echo $row['post_id']  ?>">

</div>

我们摆脱了包含$post_id的隐藏输入标签,而是将其用作按钮的id

if ($already_like == 1) { ?>

<button class="unlikebtn" name="unlike" id="<?php echo $post_id ?>">
  <span class="like_toggle">
    <svg aria-label="Unlike" class="like_ico" fill="#ed4956" height="24" viewBox="0 0 48 48" width="24">
      <path clip-rule="evenodd" d="M35.3 35.6c-9.2 8.2-9.8 8.9-11.3 8.9s-2.1-.7-11.3-8.9C6.5 30.1.5 25.6.5 17.8.5 9.9 6.4 3.5 13.7 3.5 20.8 3.5 24 8.8 24 8.8s3.2-5.3 10.3-5.3c7.3 0 13.2 6.4 13.2 14.3 0 7.8-6.1 12.3-12.2 17.8z" fill-rule="evenodd">
      </path>
    </svg>
  </span>
</button>
?>">
<a href="post.php?id=<?php echo $post_id?>">
  <svg aria-label="Comment" class="comment_ico " fill="#262626" height="24" viewBox="0 0 48 48" width="24">
    <path clip-rule="evenodd" d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 44.5 12.7 44.5 24z" fill-rule="evenodd">
    </path>
  </svg>
</a>

 <?php } elseif($already_like == 0){  ?>

   <button name="like" class="likebtn" id="<?php echo $post_id?>">
     <span class="like_toggle">
       <svg aria-label="Like" class="like_ico" fill="#262626" height="24" viewBox="0 0 48 48" width="24">
         <path clip-rule="evenodd" d="M34.3 3.5C27.2 3.5 24 8.8 24 8.8s-3.2-5.3-10.3-5.3C6.4 3.5.5 9.9.5 17.8s6.1 12.4 12.2 17.8c9.2 8.2 9.8 8.9 11.3 8.9s2.1-.7 11.3-8.9c6.2-5.5 12.2-10 12.2-17.8 0-7.9-5.9-14.3-13.2-14.3zm-1 29.8c-5.4 4.8-8.3 7.5-9.3 8.1-1-.7-4.6-3.9-9.3-8.1-5.5-4.9-11.2-9-11.2-15.6 0-6.2 4.6-11.3 10.2-11.3 4.1 0 6.3 2 7.9 4.2 3.6 5.1 1.2 5.1 4.8 0 1.6-2.2 3.8-4.2 7.9-4.2 5.6 0 10.2 5.1 10.2 11.3 0 6.7-5.7 10.8-11.2 15.6z" fill-rule="evenodd">
         </path>
       </svg>
     </span>
   </button>
   <a href="post.php?id=<?php echo $post_id?>">
     <svg aria-label="Comment" class="comment_ico " fill="#262626" height="24" viewBox="0 0 48 48" width="24">
       <path clip-rule="evenodd" d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 44.5 12.7 44.5 24z" fill-rule="evenodd">
       </path>
     </svg>
   </a>
   <?php }  ?>

,我们创建了一个表单,该表单的名称用于添加评论,以便我们可以使用document.add_comment.post_id.value获取帖子ID的值:

<div class="add_a_comment">
    <div class="add_comment_section">
      <span class="hor-line">
      </span>
      <div>
        <form name="add_comment">
          <textarea contenteditable aria-label="Add a comment…" placeholder="Add a comment…" class="addcomment_ta" autocomplete="off" autocorrect="off" id="comment_content" name="comment_content" id="editable_comment">
          </textarea>
          <div class="post_btn">
            <id="btn_comment">POST</button>
          </div>
          <input type="text" name="post_id" hidden="true" value="<?php echo $row['post_id']  ?>">
      </div>
    </div>
</div>

然后JavaScript变为:

$(document).ready(function(){
    $("#btn_comment").click(function(){
        $.post("inc/add_comment.php" , 
        {
            comment_content: $("#comment_content").val(),
            post_id: document.add_comment.post_id.value
        },
        function(data){
            alert("data");
        })

    });
});
$(document).ready(function() {
    $(".likebtn").click(function() {
        let post_u_id = $(this).attr('id');
        $.post("inc/like.php", 
        {
            post_u_id: post_u_id
        },
        function(data){
        })
    });
});
$(document).ready(function() {
    $(".unlikebtn").click(function() {
        let post_u_id = $(this).attr('id');
        $.post("inc/unlike.php", 
        {
            post_id: post_u_id
        },
        function(data){
        })
    });
});

建议

您当前正在使用AJAX删除,更新和添加评论。但是您忽略了在成功的AJAX调用返回后更新演示文稿(DOM)的方法。例如,成功删除评论后,您应该从DOM中删除评论。如果评论为“不喜欢”,则现在应将其显示为不喜欢的评论。由于您没有执行任何操作,因此最好完全不使用AJAX,而只创建如下形式的表单

您应该重新组织HTML,以便为每个注释创建表单。一个例子:

<form action="inc/unlike.php" method="post">
  <input type="hidden" name="post_id" value="<?php echo $post_id ?>">
  <button type="submit">
    <span class="like_toggle">
      <svg aria-label="Unlike" class="like_ico" fill="#ed4956" height="24" viewBox="0 0 48 48" width="24">
        <path clip-rule="evenodd" d="M35.3 35.6c-9.2 8.2-9.8 8.9-11.3 8.9s-2.1-.7-11.3-8.9C6.5 30.1.5 25.6.5 17.8.5 9.9 6.4 3.5 13.7 3.5 20.8 3.5 24 8.8 24 8.8s3.2-5.3 10.3-5.3c7.3 0 13.2 6.4 13.2 14.3 0 7.8-6.1 12.3-12.2 17.8z" fill-rule="evenodd">
        </path>
      </svg>
    </span>
  </button>
</form>

然后,您的unlike.php脚本将通过重定向回index.php来重新创建更新的演示文稿来完成。