更新mySQL记录而不刷新页面,动画链接消失

时间:2012-07-16 10:30:16

标签: php jquery mysql ajax

我正在努力解决我的问题。我已经创建了代码并且在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;  
}

3 个答案:

答案 0 :(得分:3)

您应该阅读jQuery AJAX函数。您可能会被$.ajax和/或$ .post函数强行插入。所有这些功能都为您提供成功/失败回调,您可以hide(或fadeOut)所需的元素。

基本上,您只需从页面中获取所需的数据并将其传递给jQuery函数。既然你的PHP函数已经做了他们应该做的事情,那么一旦你掌握了jQuery函数,这应该是一个小任务。

答案 1 :(得分: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-Ajax

      $(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();
        });
});

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

答案 2 :(得分:1)

你没有显示任何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>