php - 我的 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());
}
?>
解决方案
您没有在$.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;
});
});
推荐阅读
- sql - 带有包含表变量的 while 条件的 SQL Server 存储过程
- java - java如何将此代码从查找所有真实对象更改为查找错误
- node.js - 获取嵌入 PowerBi Angular 8 的正确令牌
- javascript - react hooks 为什么我的拖放项目卡住了?
- javascript - 在MVC中动态添加时如何在每行上将行号值设置为Textboxfor
- c++ - 自定义 CFileDialog 时如何控制新控件的大小和位置?
- javascript - 如何触发按钮点击按键
- javascript - 在 JavaScript 中添加一个简单的 counter[i] 变量以附加到 wrapper.append(container);
- python - 程序不将值识别为有效的变量值?
- java - 从中运行批处理文件后如何继续执行Java类