单击按钮，将数据添加到 SQL 并再次单击以删除数据，需要 php 代码
Posted
技术标签:
【中文标题】单击按钮，将数据添加到 SQL 并再次单击以删除数据，需要 php 代码【英文标题】：Click button, add data to SQL and click again to remove data, Need php code 【发布时间】：2020-02-21 07:32:24 【问题描述】：在我制作的帖子列表页面中，我在 javascript 中添加了一个收藏按钮。但我不能将它用作收藏按钮。我希望，当我单击按钮时，当按钮变为红色时，一个值将添加到我的数据库中。再次单击将删除该值。
The JavaScript button I created
My table name tbl_post and attribute name fav_button
我的代码 postlist.php
<div class="block">
<table class="data display datatable" id="example">
<thead>
<tr>
<th >No.</th>
<th >Post Title</th>
<th class="list-post" >Description</th>
<th >Category</th>
<th >Image</th>
<th >Tags</th>
<th >Date</th>
<th >Front</th>
<th >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>
$('.favme').click(function()
$(this).toggleClass('active');
);
$(".favme").on('click touchstart', function()
$(this).toggleClass('is_animating');
);
$(".favme").on('animationend', function()
$(this).toggleClass('is_animating');
); .flexbox
display: flex;
height: 100%;
justify-content: center;
align-items: center;
.fav-btn
display: flex;
height: 100%;
justify-content: center;
align-items: center;
@keyframes favme-anime
0%
opacity: 1;
font-size: ms(0);
-webkit-text-stroke-color: transparent;
25%
opacity: 0.6;
color: #fff;
font-size: ms(-2);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #dc3232;
75%
opacity: 0.6;
color: #fff;
font-size: ms(3);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #dc3232;
100%
opacity: 1;
font-size: ms(2);
-webkit-text-stroke-color: transparent;
@keyframes favme-hover
from
font-size: ms(3);
80%
font-size: ms(2);
.favme
display: block;
font-size: ms(2);
width: auto;
height: auto;
cursor: pointer;
box-shadow: none;
transition: all 0.2s ease;
color: #cbcdce;
margin: 0;
.favme.active
color: #dc3232;
.favme:hover
animation: favme-hover 0.3s infinite alternate;
.favme.is_animating
animation: favme-anime 0.3s;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<div class="flexbox">
<div class="fav-btn">
<span href="" class="favme dashicons dashicons-heart"><i class="fas fa-heart"></i></span>
</div>
</div>【问题讨论】：
你有什么问题？ 请阅读How to Ask。这不是代码编写服务。您需要自己开始编写 - 如果您遇到问题，我们可以为您提供帮助，但是您需要向我们展示您尝试过的内容并给我们一个正确的问题描述。 【参考方案1】：这是一个小脚本。
/*using ajax*/
$('#fav').click(function()
$e = $(this);
$status = $e.data('status');
$id = $e.data('id');
$operation = ($status)?'add':'remove';
$.ajax(
url: "http://example.com/addtofav",
cache: false,
data:'id':$id,'operation':$operation,
success: function(data)
if($status)
$e.addClass('nonfavpro')
$e.removeClass('favpro')
$e.data('status',false)
else
$e.addClass('favpro')
$e.removeClass('nonfavpro')
$e.data('status',true)
);
);
/*Without ajax simple change property of button*/
$('#fav1').click(function()
$e = $(this);
$status = $e.data('status');
if($status)
$e.addClass('nonfavpro')
$e.removeClass('favpro')
$e.data('status',false)
else
$e.addClass('favpro')
$e.removeClass('nonfavpro')
$e.data('status',true)
);.favpro
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
.nonfavpro
background-color: red;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
**using-Ajax**
<button id="fav" data-id="1" data-status="false" class="nonfavpro">Add to fav</button>
**Non-Ajax**
<button id="fav1" data-status="false" class="nonfavpro">Add to fav</button>希望它会有所帮助:)
【讨论】：
我需要php代码，点击按钮，添加数据到SQL，再次点击删除数据 如果您需要一个带有 PHP 代码的 javascript 按钮。您需要使用ajax 选项。我已经输入了代码以上是关于单击按钮，将数据添加到 SQL 并再次单击以删除数据，需要 php 代码的主要内容，如果未能解决你的问题，请参考以下文章