我创建了将素材图标切换为开/关。 当图标关闭时,我需要运行删除查询。 当图标打开时,我需要运行插入查询。
我知道我需要使用AJAX而且还是新手。 我无法理解的是我是否引用了当前的PHP文件或其他一些php文件。我知道我必须编写我的查询并在PHP文件中执行它,但不确定这样做。我不想重新加载pagebecuase我这样做会丢失其他信息。
我基本上想要更新图标并执行所需的SQL stmnt。
感谢任何帮助。
到目前为止我所拥有的:
JAVASCRIPT:
//update the favorites icon
function updateFavorites(id){
if($(this).find('#staricon'+id)){
if($('#staricon'+id).hasClass('star-color')) {
$('#staricon'+id).removeClass('star-color');
//update the table
deleteFavorites();
}
else {
$('#staricon'+id).addClass('star-color');
addFavorites();
}
}
}
//delete the item from the table
function deleteFavorite(){
$.ajax({
type: "POST",
url: "somePHPFile.php",
cache: false,
data:{id:'#staricon'+id},
}).done(function( msg ) { console.log(msg);
});
}
PHP:
//check to see if this is a favorite
$query = "SELECT * FROM favorites WHERE story_id = " . $story_id;
$result = mysqli_query($conn, $query);
$is_fav = mysqli_num_rows($result);
if ($is_fav > 0) {
echo '<a class=" stats pull-right " href="javacript:void" ><span id="staricon' . $story_id .'" class="star-color" onclick="updateFavorites(' . $story_id . ')"><i class=" material-icons " title="Favorite" >star</i></span></a>';
}
else {
echo '<a class=" stats pull-right " href="javacript:void" ><span id="staricon' . $story_id .'" onclick="updateFavorites(' . $story_id . ')"><i class=" material-icons " title="Favorite" >star</i></span></a>';
}
我已更新我的代码以反映以下内容:
JAVASCRIPT:
function updateFavorites(id){
if($(this).find('#staricon'+id)){
if($('#staricon'+id).hasClass('star-color')) {
$('#staricon'+id).removeClass('star-color');
$.ajax({
type: "POST",
url: "showStoryCards.php",
data: {
id: $(this).data(id),
enabled: !$(this).hasClass('star-color') //delete
},
})
}
else {
$('#staricon'+id).addClass('star-color');
$.ajax({
type: "POST",
url: "showStoryCards.php",
data: {
id: $(this).data("id"),
enabled: $(this).hasClass('star-color') //insert
},
})
}
}
PHP:
echo $story_title ;
$query = "SELECT count(*) FROM favorites WHERE story_id = ?";
$sql= $conn->prepare($query);
$sql->bind_param("s", $story_id);
$sql->execute();
$result = $sql->get_result();
$is_fav = mysqli_num_rows($result);
if ($is_fav == 0) {
echo '<a class=" stats pull-right " href="javacript:void" ><span
id="staricon' . $story_id .'" class="star-color"
onclick="updateFavorites(' . $story_id . ')"><i class=" material-icons "
title="Favorite" >star</i></span></a>';
}
else {
echo '<a class=" stats pull-right " href="javacript:void" ><span
id="staricon' . $story_id .'" onclick="updateFavorites(' . $story_id .
')"><i class=" material-icons " title="Favorite" >star</i></span></a>';
}
if (isset($_POST['enabled'])){
if($_POST['enabled']) { // INSERT query
$sql = "INSERT INTO favorites VALUES( " . $id . ", '1') ";
$sql->execute();
} else {// Delete query
}
}
我的图标会更新为相应的开/关颜色,但我仍然无法触发查询。甚至看起来回调到PHP页面的功能都没有,因为我无法检索$ _POST。
答案 0 :(得分:1)
使用准备好的陈述,因为你正在接受注射攻击。
尝试此查询
$query = "SELECT * FROM favourites WHERE story_id = ?";
$sql= $conn->prepare($query);
$sql->bind_param("s", $story_id);
$sql->execute();
$result = $sql->getResult();
print_r($result);
答案 1 :(得分:0)
简化一切。
$(document).ready(function() {
$('#staricon').on('click', function() {
// Prevent multiple clicks before the first one finishes.
// There is probably a more elegant way to do this.
if(active){
return;
}
active = false;
//console.log($(this).hasClass('star-color'));
//console.log($(this).data("id"));
$.ajax({
type: "POST",
url: "somePHPFile.php",
data: {
id: $(this).data("id"),
enabled: !$(this).hasClass('star-color')
},
}).done(function(msg) {
active = true;
$(this).toggleClass('star-color');
console.log(msg);
});
});
});
/*
PHP
// Use ID and enabled to add or delete from db.
if($_POST['enabled']) {
// INSERT query
} else {
// Delete query
}
*/
div.star-color {
background-color: #FF00FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="staricon" data-id="1" class="star-color">Test</div>