更新MySQL记录而无需刷新页面，动画链接消失

Question

我正在努力解决我的问题。 我已经创建了代码并且可以在PHP中正常工作，但是现在我想将其发展为最终用户更好的解决方案。

我有一组链接来确认或拒绝操作。 一旦用户单击“确认” /“拒绝”，我希望使用AJAX将值保存到db，然后使用jQuery使li动画。

目前，我已经使用php，它将重定向到URL。 任何帮助/指导将不胜感激。

这是我的代码：

链接

           <?php    

            $friend_unconfirmed_from_them = mysql_query('
            SELECT * from wallfriends 
            where mem_id_to ='.$USER->id.' AND confirm = 0
            '); //unconfirmed friends to logged in user ($USER->id)

        while ($friendrequest = mysql_fetch_array($friend_unconfirmed_from_them, MYSQL_ASSOC)) { 


        $senders_name = mysql_query('
            SELECT firstname, lastname from mdl_user 
            where id = '.$friendrequest['sender'].'
            '); //get unconfirmed friends name

        while ($sender = mysql_fetch_array($senders_name, MYSQL_ASSOC)) { 
            ?>

        <li><?php echo $sender['firstname'].'&nbsp;'.$sender['lastname']; 
            }?>            
        <a href="confirmfriend.php?userid=<?php echo $friendrequest['sender']; ?>">Confirm Link</a>
        &nbsp;<a href="removefriend.php?userid=<?php echo $friendrequest['sender']; ?>">Deny Link</a></li> 
//echo each friend in li with confirm deny links
            <?php } ?>

        </ul>  

Confirmfriend.php

$userid = optional_param('userid', 0, PARAM_INT);


$connection = mysql_connect("localhost", "root", "on10n") or die ("Unable to connect!");   
mysql_select_db("fe") or die ("Unable to select database!");    
$query = "UPDATE wallfriends SET confirm = 1 WHERE mem_id_to = '$USER->id' AND mem_id_from = '$userid'";    

$result = mysql_query($query) or die ("Error in query: $query. ".mysql_error()); 
if (!$result){
    echo "There were errors :<br>". mysql_error();
} 
else{ 
redirect($siteUrl.'/profile.php?userid='.$userid.'');
die;  
}

denyfriend.php

$userid = optional_param('userid', 0, PARAM_INT);


$connection = mysql_connect("localhost", "root", "on10n") or die ("Unable to connect!");   
mysql_select_db("fe") or die ("Unable to select database!");    

$query = "DELETE FROM wallfriends 
WHERE (mem_id_from = '$USER->id' OR mem_id_from = '$userid') 
AND (mem_id_to = '$USER->id' OR mem_id_to = '$userid') 
";    

$result = mysql_query($query) or die ("Error in query: $query. ".mysql_error()); 

if (!$result){
    echo "There were errors :<br>". mysql_error();
} 
else{ 
redirect($siteUrl.'/profile.php?userid='.$userid.'');
die;  
}

Answer 1

您应该阅读jQuery AJAX函数。 您可能对$ .ajax和/或$ .post函数有兴趣。 所有这些功能都为您提供了成功/失败回调，您可以在其中隐藏 （或fadeOut ）所需的元素。

基本上，您只需从页面中获取所需的数据，然后将其传递给jQuery函数即可。 由于您的PHP函数已经在做应做的事情，一旦您了解了jQuery的功能，这应该是一个小任务。

Answer 2

您可以为此使用jQuery-Ajax。

例如

用户界面HTML代码

<li><?php echo $sender['firstname'].'&nbsp;'.$sender['lastname']; 
            }?>            
        <a id="confirm" data-userid="<?php echo $friendrequest['sender']; ?>">Confirm Link</a>
        &nbsp;<a id="deny" data-userid="<?php echo $friendrequest['sender']; ?>">Deny Link</a></li> 

jQuery的阿贾克斯

      $(document).ready(function(){
         $("#confirm").click(function(e){

        $.ajax("confirm.php?userid=" + $(this).attr("data-userid"), {
                   complete: function() {
                      $(this).parent().fadeOut();
                   }
        });

        e.preventDefault();
        });
         $("#deny").click(function(e){
        $.ajax("deny.php?userid=" + $(this).attr("data-userid"), {
                   complete: function() {
                      $(this).parent().fadeOut();
                   }
        });
    e.preventDefault();
        });
});

我没有测试代码。 希望它能给一个想法。

Answer 3

您没有显示任何JavaScript，锚点会将页面扔到Confirmfriend.php / removefriend.php上。

另外，您还有多个嵌套的锚标记（请记住使用</a>关闭）

为了达到预期的效果，我会这样做：

<li>
  <a href="javascript:void(0);" class="confirm friendaction"
      data-userid="<?php echo $friendrequest['sender'];>">Confirm</a>
</li><li>
  <a href="javascript:void(0);" class="remove friendaction"
      data-userid="<?php echo $friendrequest['sender'];>">Remove</a>
</li>

随后是一个脚本，该脚本将onclick挂钩到锚点，从而发送AJAX请求。

<script>
   $('.friendaction').click(function() {
       var id = this.getAttribute('data-userid'),
           url = this.className.match("confirm") 
              ? "confirmfriend.php" 
              : "removefriend.php", 
           liReference = $(this).parent();
       $.ajax(url + "?userid=" + id, {
           complete: function() {
              $(liReference).fadeOut();
           }
       });
   });
</script>