Javascript 当mysqli使用ajax更新时更改按钮_Javascript_Php_Jquery_Ajax

Javascript 当mysqli使用ajax更新时更改按钮

javascript php jquery ajax

Javascript 当mysqli使用ajax更新时更改按钮,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我从一个在div中带有开/关按钮的数据库中获得了很多结果，我希望使用ajax在单击时将按钮从开更改为关，反之亦然，然后在不更新所有页面的情况下更新按钮，或者仅通过按钮重新加载页面 <?php $i=1; $mek = $conn->query("SELECT * FROM `jadwal` WHERE email= '".$_SESSION["email"]."' "); while($crot = mysqli_fetch_array($mek)){ $c

我从一个在div中带有开/关按钮的数据库中获得了很多结果，我希望使用ajax在单击时将按钮从开更改为关，反之亦然，然后在不更新所有页面的情况下更新按钮，或者仅通过按钮重新加载页面

<?php 
$i=1;
$mek = $conn->query("SELECT * FROM `jadwal` WHERE email= '".$_SESSION["email"]."' ");
while($crot = mysqli_fetch_array($mek)){        
    $c = explode(";", $crot['task_target']);
?>
                <div class="col-md-3">
                <div class="widget">
                <legend><?=$crot['username']?><span class='pull-right'><?=$crot['type']?></span></legend>
                <div class="form-group">Target:<br>
                <?php   foreach($c as $d){
    $c = explode("-", $d);
    $targetid = $c[0];
    echo '<span class="btn-xs color-red">'.$lokasii = $c[1].'</span><br>';
    }?></div>

<div class="form-group">Likes: <?= $crot['get_like']?><span class='pull-right'><?php if($crot['active_like'] == '1'){echo "<a href='bot/option.php?id=".$crot['id']."&type=like&status=off' type='submit' class='btn btn-xs btn-success'>ON</a>";}else{echo "<a href='bot/option.php?id=".$crot['id']."&type=like&status=on' type='submit' class='btn btn-xs btn-danger'>OFF</a>";}?></span></div>

                <div class="form-group">Comments: <?= $crot['get_comment']?><span class='pull-right'><?php if($crot['active_comment'] == '1'){echo '<a href="bot/option.php?id='.$crot['id'].'&type=comment&status=off"  type="submit" class="btn btn-xs btn-success">ON</a>';}else{echo '<a href="bot/option.php?id='.$crot['id'].'&type=comment&status=on" type="submit" class="btn btn-xs btn-danger">OFF</a>';}?></span></div>

                <div class="form-group">Follows: <?= $crot['get_follow']?><span class='pull-right'><?php if($crot['active_follow'] == '1'){echo '<a type="submit" class="btn btn-xs btn-success" href="bot/option.php?id='.$crot['id'].'&type=follow&status=off">ON</a>';}else{echo '<a href="bot/option.php?id='.$crot['id'].'&type=follow&status=on"  type="submit" class="btn btn-xs btn-danger">OFF</a>';}?></span></div>
                <div class="form-group">Status: <? if($crot['active_task'] =='1'){
                    echo '<b class="color-green">Active</b><span class="pull-right"><a class="btn btn-xs btn-info" href="bot/option.php?id='.$crot['id'].'&type=task&status=off" aria-label="Active">
  <i class="fa fa-play" aria-hidden="true"> Active</i></a>';}else{
                    echo '<b class="color-red">Paused</b><span class="pull-right"><a class="btn btn-xs btn-info" href="bot/option.php?id='.$crot['id'].'&type=task&status=on" aria-label="Pause">
  <i class="fa fa-pause" aria-hidden="true"> Paused</i></a>';}?> &nbsp; <a href="bot/option.php?id=<?=$crot['id']?>&type=delete" onclick="return confirm('Are you sure you want to delete this item?');" class="btn btn-xs btn-danger" aria-label="Pause"><i class="fa fa-trash" aria-hidden="true"> Delete</i></a></span></div>
                </div>
                </div>
<? } ?>
</div>


目标：

喜欢：
评论：
跟随：
地位：

每次我点击按钮，即

echo '<b class="color-green">Active</b><span class="pull-right"><a class="btn btn-xs btn-info" href="bot/option.php?id='.$crot['id'].'&type=task&status=off" aria-label="Active"><i class="fa fa-play" aria-hidden="true"> Active</i></a>';

echo“活动”；

它会重新加载页面并花费大量时间

在我的帮助下，我改进了代码

    <?php 
$i=1;
$mek = $conn->query("SELECT * FROM `jadwal` WHERE email= '".$_SESSION["email"]."' ");
if (!$mek) {
   printf("%s\n", $conn->error);
   exit();
}

while($crot = mysqli_fetch_array($mek)){        
    $c = explode(";", $crot['task_target']);
?>
                <div id="task<?=$crot['id']?>" class="col-md-3">
                <div class="widget">
                <legend><?=$crot['username']?><span class='pull-right'><?=$crot['type']?></span></legend>
                <div class="form-group">Target:<br>
                <?php   foreach($c as $d){
    $c = explode("-", $d);
    $targetid = $c[0];
    echo '<span class="btn-xs">'.$lokasii = $c[1].'</span><br>';
    }?></div>

                <div class="form-group">Likes: <?= $crot['get_like']?>
                <span class='pull-right' id="status_like_<?=$crot['id']?>">
                <?php if($crot['active_like'] == '1'){
                    echo '<a href="javascript:void(0)" onclick="update_like(0,'.$crot['id'].')" type="submit" class="btn btn-xs btn-success">ON</a>';}else{
                        echo "<a href='javascript:void(0)' onclick='update_like(1,".$crot['id'].")' type='submit' class='btn btn-xs btn-danger'>OFF</a>";}?>
                        </span>
                        </div>

                <div class="form-group">Comments: <?= $crot['get_comment']?>
                <span class='pull-right' id="status_comment_<?=$crot['id']?>">
                <?php if($crot['active_comment'] == '1'){
                    echo '<a href="javascript:void(0)" onclick="update_comment(0,'.$crot['id'].')"  type="submit" class="btn btn-xs btn-success">ON</a>';}else{
                        echo '<a href="javascript:void(0)" onclick="update_comment(1,'.$crot['id'].')" type="submit" class="btn btn-xs btn-danger">OFF</a>';}?>
                        </span>
                        </div>

                <div class="form-group">Follows: <?= $crot['get_follow']?>
                <span class='pull-right' id="status_follow_<?=$crot['id']?>">
                <?php if($crot['active_follow'] == '1'){
                    echo '<a type="submit" class="btn btn-xs btn-success" href="javascript:void(0)" onclick="update_follow(0,'.$crot['id'].')">ON</a>';}else{
                        echo '<a href="javascript:void(0)" onclick="update_follow(1,'.$crot['id'].')"  type="submit" class="btn btn-xs btn-danger">OFF</a>';}?>
                        </span>
                        </div>

                <div class="form-group">Status: 
                <span id="status_task_1<?=$crot['id']?>"><?php if($crot['active_task'] == 1) {echo'<b class="color-green">Active</b>';}else{echo'<b class="color-red">Inactive</b>';}?>
                </span>
                <span class='pull-right'>
                <span id="status_task_2<?=$crot['id']?>">
                <?php if($crot['active_task'] == '1'){
                    echo '<a href="javascript:void(0)" onclick="update_task(0,'.$crot['id'].')" type="submit" class="btn btn-xs btn-primary"><i class="fa fa-play" aria-hidden="true"> Active</i></a>';}else{
                        echo '<a href="javascript:void(0)" onclick="update_task(1,'.$crot['id'].')"  type="submit" class="btn btn-xs btn-primary"><i class="fa fa-pause" aria-hidden="true"> Paused</i></a>';}?>
                        </span>
                <a href="javascript:void(0)" onclick="update_delete(1,<?=$crot['id']?>)" class="btn btn-xs btn-danger" aria-label="Delete"><i class="fa fa-trash" aria-hidden="true"> Delete</i></a>
                </span>
                </div>
                </div>
                </div>

<? } ?>



<script type="text/javascript"> <!-- update like -->
function update_like(status,id){
 $.ajax({
url: 'bot/option.php',
data: 'status=' + status + '&id=' + id +'&type=' + 'like',
type: 'POST',
beforeSend: function() {$('#status_like_'+id).html('<i class="fa fa-refresh fa-spin fa-2x fa-fw"></i>');},
success: function (data) {
console.log(data);
  if(data == 'on'){
  $('#status_like_'+id).html('<a href="javascript:void(0)" onclick="update_like(0,'+id+')" type="submit" class="btn btn-xs btn-success">ON</a>');
} else {
  $('#status_like_'+id).html('<a href="javascript:void(0)" onclick="update_like(1,'+id+')" type="submit" class="btn btn-xs btn-danger">OFF</a>');
}
}
});
}
</script>
<script type="text/javascript"> <!-- update follow -->
function update_follow(status,id){
 $.ajax({
url: 'bot/option.php',
data: 'status=' + status + '&id=' + id +'&type=' + 'follow',
type: 'POST',
beforeSend: function() {$('#status_follow_'+id).html('<i class="fa fa-refresh fa-spin fa-2x fa-fw"></i>');},
success: function (data) {
console.log(data);
  if(data == 'on'){
  $('#status_follow_'+id).html('<a href="javascript:void(0)" onclick="update_follow(0,'+id+')" type="submit" class="btn btn-xs btn-success">ON</a>');
} else {
  $('#status_follow_'+id).html('<a href="javascript:void(0)" onclick="update_follow(1,'+id+')" type="submit" class="btn btn-xs btn-danger">OFF</a>');
}
}
});
}
</script>
<script type="text/javascript"> <!-- update comment -->
function update_comment(status,id){
 $.ajax({
url: 'bot/option.php',
data: 'status=' + status + '&id=' + id +'&type=' + 'comment',
type: 'POST',
beforeSend: function() {$('#status_comment_'+id).html('<i class="fa fa-refresh fa-spin fa-2x fa-fw"></i>');},
success: function (data) {
console.log(data);
  if(data == 'on'){
  $('#status_comment_'+id).html('<a href="javascript:void(0)" onclick="update_comment(0,'+id+')" type="submit" class="btn btn-xs btn-success">ON</a>');
} else {
  $('#status_comment_'+id).html('<a href="javascript:void(0)" onclick="update_comment(1,'+id+')" type="submit" class="btn btn-xs btn-danger">OFF</a>');
}
}
});
}
</script>
<script type="text/javascript"> <!-- update task -->
function update_task(status,id){
 $.ajax({
url: 'bot/option.php',
data: 'status=' + status + '&id=' + id +'&type=' + 'task',
type: 'POST',
beforeSend: function() {$('#status_task_2'+id).html('<i class="fa fa-refresh fa-spin fa-2x fa-fw"></i>');},
success: function (data) {
console.log(data);
  if(data == 'on'){
  $('#status_task_1'+id).html('<b class="color-green">Active</b>');
  $('#status_task_2'+id).html('<a href="javascript:void(0)" onclick="update_task(0,'+id+')" type="submit" class="btn btn-xs btn-primary"><i class="fa fa-play" aria-hidden="true"> Active</i></a>');
} else {
  $('#status_task_1'+id).html('<b class="color-red">Inactive</b>');
  $('#status_task_2'+id).html('<a hr<a href="javascript:void(0)" onclick="update_task(1,'+id+')" type="submit" class="btn btn-xs btn-primary"><i class="fa fa-pause" aria-hidden="true"> Inactive</i></a>');
}
}
});
}
</script>
<script type="text/javascript"> <!-- update comment -->
function update_delete(status,id){  
var r = confirm("Are You Want to Change This Status!");
 if (r == true) {
 $.ajax({
url: 'bot/option.php',
data: 'status=' + status + '&id=' + id +'&type=' + 'delete',
type: 'POST',
success: function (data) {
console.log(data);
  if(data == 'on'){
      $( "div #task"+id).remove();
}
}
});
}
}
</script>


目标：

喜欢：