首页 > 解决方案 > 我的 Ajax 代码没有刷新我最喜欢的按钮

问题描述

我尝试了不同的代码来设置一个收藏按钮,当您单击它时该按钮会更改(图像) - 收藏/取消收藏而不刷新页面,但它不起作用。使用此代码,当我单击收藏按钮时,页面不会重新加载但没有任何变化,图像(空心)不会改变,并且数据库中没有任何记录......

 // ************************* AJAX 


 <script type="text/javascript" src="https://ajax.googleapis.com.   /ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script type="text/javascript">
 $(function(){
    $("#refreshAjout").click(function(){
   $.ajax({
       type: "POST",
       url: $("#refreshAjout").attr('action'),
       success: function(retour){

       }
        });
            return false;
    });
  });

  $(function(){
    $("#refreshSupp").click(function(){
   $.ajax({
       type: "POST",
       url: $("#refreshSupp").attr('action'),
       success: function(retour){

       }
        });
            return false;
    });
   });
 </script>

这是我的按钮的 php 代码以及从数据库中添加或删除数据的功能

 <?php

 // If user not connected
 if ($_SESSION['pseudo'] == NULL){ 


 echo '<a href="../../index-auth-creer-compte.php"><img src="../..   /images/empty-heart.jpg" class="ajouter"</img> </a>';

  }

 // If user connected
 if (isset($_SESSION['pseudo']) && isset($_SESSION['pass'])){

 // We check if the key exist in DB
 $req="SELECT count(*) FROM favoris WHERE profil='".$test."'"; 
 $res=mysql_query($req);

 // if key not in DB we show empty heart button
 if(mysql_result($res,0)==0 ) { 
 ?>

 <form method="post" action="">
 <button type="image" id="refreshAjout" class="ajouter" value=""   name="refreshAjout"></button> 
 </form> 

 <?php   
 // if key in DB we show pink heart   
 } else{ ?>

 <form method="post" action="">
 <button type="image" id="refreshSupp" class="supprimer" value=""    name="refreshSupp"></button> 
 </form> 

 <?php
    }
   }

最后是在数据库中放置或删除信息的功能

if (isset($_POST['refreshAjout']) ) {

$sql = "INSERT INTO favoris (id, client, profil, photo, prenom,   reference, age, lien) VALUES('','$pseudo' ,'$pseudo$referenceBase','$photoBase','$prenomBase', '$referenceBase', '$ageBase','$lienBase')";
mysql_query($sql) or die('Erreur SQL ! '.$sql.'<br>'.mysql_error());
}

if (isset($_POST['refreshSupp'])  ) {

$sql = "DELETE FROM favoris  WHERE profil ='$pseudo$referenceBase'";
mysql_query($sql) or die('Erreur SQL ! '.$sql.'<br>'.mysql_error());
}
?>

标签: phpajax

解决方案


您没有在$.ajax调用中发送任何参数,因此$_POST将为空。您需要使用data:选项发送参数。

您可以在一次调用中组合两个提交按钮,因为可以从元素本身获取参数。

$(function() {
  $("#refreshAjout, #refreshSupp").click(function() {
    var newSrc = this.id == "refreshAjout" ? "../../images/pink-heart.jpg" : "../../images/empty-heart.jpg";
    $.ajax({
      type: "POST",
      url: $(this).attr('action'),
      data: { [this.id]: this.value },
      success: function(retour) {
        $(".ajouter").attr("src", newSrc);
      }
    });
    return false;
  });
});

推荐阅读