Question

我创建了将素材图标切换为开/关。当图标关闭时，我需要运行删除查询。当图标打开时，我需要运行插入查询。

我知道我需要使用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。

Answer 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);

Answer 2

简化一切。

$(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>

使用单个链接在MySQL中运行单独的查询

2 个答案: