AJAX使用相同的按钮添加和删除 - ajax add and delete with same button

我正在尝试创建一个按钮，单击该按钮时会将记录添加到该数据库，再次单击时，将从该数据库中删除该记录（这是一个'favourite'按钮）。

我希望它按如下方式工作;

用户单击"收藏夹"按钮>按钮状态更改为成功>添加了记录

用户再次单击"fav"按钮>状态更改为默认>从数据库中删除的记录

到目前为止，我的代码如下（由于@Peter更新了代码）;

books_model.php

class BooksModel
{
 public function checkFav($bookid,$userid)
 {
    $book_id=$_REQUEST['book_id'];
    $user_id=$_SESSION['user_id'];
    $sql = "SELECT * FROM favourite WHERE user_id=? AND book_id=?";
    $query = $this->db->prepare($sql);
    $query->bind_param('ii', $userid,$bookid);
    $query->execute();
    $query->store_result();
    $rows_found = $query->num_rows();
     if(empty($rows_found)) {
        $sql = "INSERT INTO favourite (user_id, book_id)
                VALUES (?, ?)";
        $query = $this->db->prepare($sql);
        $query->bind_param('ii',$userid,$bookid);
        $query->execute();
    } else { 
        $sql = "DELETE FROM favourite WHERE user_id=? AND book_id =?";
        $query = $this->db->prepare($sql);
        $query->bind_param('ii',$userid,$bookid);
        $query->execute();
    }
 }
}

books_controller.php

class Books extends Controller
{
 function checkFav()
 {
    $checkFav_model = $this->loadModel('Books');
 }
}

项目视图.php

$(document).ready(function(){
$( "#fav" ).click(function(){  
$( this ).toggleClass( "btn-success" );   
book_id = $(fav).val(); // set the value of the button (book_id)
    $.ajax({
         type: 'POST',
         url: '<?php echo URL; ?>books/checkFav', //location of query
         data: {book_id:book_id}, //taken from value of button
         success: function () { 
             $( "div.addtofavs" ).slideToggle( "slow" ); //show div below button
            }//end success        
        });//end ajax   
    });
});

按钮 HTML

<button id="fav" value="'.$book->id.'" type="button" class="btn btn-default"></button>

目前，当我单击按钮并在控制台中查看时，我可以看到帖子，但是没有向我的数据库发送任何内容。

任何建议或方向都值得赞赏，因为我对MVC和JS很陌生。

public function checkFav($bookid,$userid)
{
$sql = "SELECT * FROM favourite WHERE user_id=:userid AND book_id=:bookid";
$query = $this->db->prepare($sql);
$query->bindParam(':userid', $userid);
$query->bindParam(':bookid', $bookid);
$query->execute();
$rows_found = $query->countRows();
 if(empty($rows_found)) {
    $sql = "INSERT INTO favourite (user_id, book_id) VALUES (:userid, :bookid)";
    $query = $this->db->prepare($sql);
    $query->bindParam(':userid', $userid);
    $query->bindParam(':bookid', $bookid);
    $query->execute();
} else { 
    $sql = "DELETE FROM favourite WHERE user_id=:userid AND book_id =:bookid";
    $query = $this->db->prepare($sql);
    $query->bindParam(':userid', $userid);
    $query->bindParam(':bookid', $bookid);
    $query->execute();
}
}
$book_id=$_REQUEST['book_id'];
$user_id=$_SESSION['user_id'];
checkFav($book_id,$user_id);

您可以简单地进行检查： SELECT * FROM favourite WHERE user_id = :user_id AND book_id = :book_id

如果它返回某些内容，则执行 DELETE FROM favourite WHERE user_id = :user_id AND book_id = :book_id

否则进行插入。

如果你想显示这本书已经作为收藏夹添加到用户，那么你必须在页面加载时执行另一个调用，这给按钮一个属性，告诉你和用户它已经是收藏夹。

在最后一种情况下，您不必再进行检查。如果它包含属性，只需执行 DELETE 查询，否则执行 INSERT

// try to get the attribute of the button
var attr = $(".favoriteButton").attr('data-favorite');
// check the button has the attribute
if (typeof attr !== typeof undefined && attr !== false) {
   //delete query
   $.ajax({
         type: 'POST',
         url: '<?php echo URL; ?>books/deleteFav', //location of query
         data: {book_id:book_id}, //taken from value of button
         success: function () { 
             $( "div.addtofavs" ).slideToggle( "slow" ); //show div below button
            }//end success        
        });//end ajax   
    });
}

类似的东西

使用通用变量：var IsDeleted; var IsAdd; 然后是删除 = 0;添加 =1;（您的书已添加）。删除书籍时再次更改值已删除 = 1;添加 =0;当你执行 $（ "#fav" ）.click（function（）时，请检查这些值并执行您想要的操作（添加、删除）。

<button class="fvrt" data-item-id="11" data-current-state="0"> Like <button>   // 0 = normal, 1 = liked
$(document).on('click', '.fvrt', function(){
    if($(this).attr('data-current-state') == 0){
         like_item($(this).attr('data-item-id'));   // send ajax request
         $(this).attr('data-current-state', '1');
         $(this).val('Liked');  
    }else{
         dislike_item($(this).attr('data-item-id'));   // send ajax request
         $(this).attr('data-current-state', '0');
         $(this).val('Like');  
    } // checking state 
}); // on clicked