Javascript 单击按钮，将数据添加到SQL，然后再次单击以删除数据，需要php代码

在我制作的帖子列表页面中，我向Javascript添加了一个最喜欢的按钮。但我不能把它当作我最喜欢的按钮。我想，当我点击按钮时，当按钮变为红色时，会向我的数据库中添加一个值。再次单击将删除该值

我的代码postlist.php

<div class="block">
        <table class="data display datatable" id="example">
            <thead>
                <tr>
                    <th width="5%">No.</th>
                    <th width="15%">Post Title</th>
                    <th class="list-post" width="14%">Description</th>

                    <th width="12%">Category</th>
                    <th width="10%">Image</th>

                    <th width="12%">Tags</th>

                    <th width="12%">Date</th>

                    <th width="10%">Front</th>

                    <th width="10%">Action</th>
                </tr>
            </thead>
            <?php
            $query = "SELECT tbl_post. *, tbl_category.name FROM tbl_post
            INNER JOIN tbl_category ON tbl_post.cat = tbl_category.id
            ORDER BY date ";
            $post =  $db->select($query);

            if ($post) {
                $i = 0;
                while ($result = $post->fetch_assoc()) {
                    $i++; ?>

                        <tr class="odd gradeX  mng2">
                            <td class="mng"><?php echo $i; ?>|</td>
                            <td class="mng"><?php echo $result['title']; ?></td>

                            <td class="mng list-post" id="a"><?php echo $fm->textShorten($fm->wp_strip_all_tags($result['body']), 50); ?></td>

                            <td class="mng dt"><?php echo $result['name']; ?></td>

                            <td class="mng"><img class="img_db" src="<?php echo $result['image']; ?>" /></td>

                            <td class="mng"><?php echo $result['tags']; ?></td>

                            <td class="mng dt"><?php echo $fm->postListdate($result['date']) ?></td>

                        <!-- fav button add ---->

                            <td class="mng dt">

                            <div class="flexbox">

                                <div class="fav-btn">
                                    <span href="" class="favme dashicons dashicons-heart"><i class="fas fa-heart"></i></span>
                                </div>

                            </div>

                            </td>


                            <td class="mng">
                                <a class="dif_2" href="./edit-post.php?editpostid=<?php echo $result['id']; ?>"><i class="fas fa-edit"></i></a> ||
                                <a onclick="return confirm('Im Sure to DELETE?')
                                " class="dif_1" href="./del-post.php?delpostid=<?php echo $result['id']; ?>"><i class="fas fa-trash"></i></a>
                            </td>
                        </tr>


                <?php
                    }
                } ?>


        </table>

    </div>

.flexbox{
显示器：flex；
身高：100%；
证明内容：中心；
对齐项目：居中；
}
.fav btn{
显示器：flex；
身高：100%；
证明内容：中心；
对齐项目：居中；
}
@关键帧favme动画{
0% {
不透明度：1；
字号：ms（0）；
-webkit文本笔划颜色：透明；
}
25% {
不透明度：0.6；
颜色：#fff；
字号：ms（-2）；
-webkit文本笔划宽度：1px；
-webkit文本笔划颜色：#dc3232；
}
75% {
不透明度：0.6；
颜色：#fff；
字号:ms(3);；
-webkit文本笔划宽度：1px；
-webkit文本笔划颜色：#dc3232；
}
100% {
不透明度：1；
字号:ms(2);；
-webkit文本笔划颜色：透明；
}
}
@关键帧favme悬停{
从{
字号:ms(3);；
}
80% {
字号:ms(2);；
}
}
favme先生{
显示：块；
字号:ms(2);；
宽度：自动；
高度：自动；
光标：指针；
盒影：无；
过渡：所有0.2秒缓解；
颜色：#cbcdce；
保证金：0；
}
.favme.active{
颜色：#dc3232；
}
.favme:悬停{
动画：favme悬停0.3s无限交替；
}
.favme.is_正在制作动画{
动画：favme动画0.3s；
}

---

这是一个小脚本

/*使用ajax*/
$（'#fav'）。单击（函数（）{
$e=$（此项）；
$status=$e.data（'status'）；
$id=$e.data（'id'）；
$operation=（$status）？'add'：'remove'；
$.ajax({
url:“http://example.com/addtofav",
cache:false，
数据：{'id'：$id，'operation'：$operation}，
成功：功能（数据）{
如果（$状态）{
$e.addClass（'nonavpro'）
$e.removeClass（'favpro'）
$e.data（'状态'，错误）
}否则{
$e.addClass（'favpro'）
$e.removeClass（'nonavpro'）
$e.data（'状态'，真）
}
}
});
});
/*没有ajax，只需更改按钮的属性*/
$（'#fav1'）。单击（函数（）{
$e=$（此项）；
$status=$e.data（'status'）；
如果（$状态）{
$e.addClass（'nonavpro'）
$e.removeClass（'favpro'）
$e.data（'状态'，错误）
}否则{
$e.addClass（'favpro'）
$e.removeClass（'nonavpro'）
$e.data（'状态'，真）
}
});
.favpro{
背景色：#4CAF50；/*绿色*/
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
}
.nonfavpro{
背景色：红色；
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
}

**使用Ajax**
添加到fav
**非Ajax**
添加到fav
您有什么问题？请阅读。这不是一个代码编写服务。你需要自己开始写这篇文章-如果你遇到问题，我们可以帮助你，但是你需要向我们展示你尝试了什么，并给我们一个正确的问题描述。我需要php代码，点击按钮，向SQL添加数据，如果你需要一个带有php代码的javascript按钮，再次点击删除数据。您需要使用
ajax
选项。我已经写进代码了