在不刷新页面的情况下更新和显示值

Question

我想使用 jquery 更改数据库中记录的状态（活动/停用）而不实际提交（刷新页面）数据。在我的脚本中，状态在数据库中发生了变化，但由于它没有刷新，显示状态没有更新。有没有办法在不刷新的情况下显示更改的状态？我的意思是，一旦它在数据库中更新，它就应该反映在状态中。这是我的脚本 <table class="table table-bordered table-condensed table-striped mb-6">                                                        <thead>                                                        <tr>                                                        <th>Firstname</th>                                                        <th>Mobile</th>                                                       <th>Status</th></tr>                                                        </thead>                                                        <tbody>                                                        <?php //$CQuery = ""; my querywhile($ConRow = DB_fetch_array($CQuery ))                                                        {                                                            ?>                                                         <tr> <td><?php echo $ConRow['fname']; ?></td><td><?php echo $ConRow['mobile']; ?></td><?php if($ConRow['status']=='A') { ?><td><button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-danger btn-sm">De-Activate</button> </td><?php } else if($ConRow['status']=='D') { ?> <td><button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-success btn-sm">Activate</button> </td> <?php } ?>         </tr>       <?php } ?></tbody></table>

Answer 1

您可以将一些值从 php 传递到 ajax 调用，并根据该值显示所需的按钮。因此您的 php 代码将如下所示：

..

if($srow['status']=='A')

{

$sql = "UPDATE contacts SET status='D' WHERE con_id=".$id;

echo "D";//will get passed as response to ajax

}

else

if($srow['status']=='D')

{

$sql = "UPDATE contacts SET status='A' WHERE con_id=".$id;  

echo "A";//will get passed to ajax as response

}

您的 ajax 成功函数将如下所示：

  ..

   success: function(data) {

  var d = $.trim(data); //triming value if there is any whitespaces

  if (d == "A") {

    //means data is activate so show that button

    $("#"+del_id+ ".btn-success").show();

    //hiding other 

    $("#"+del_id +".btn-danger").hide();

  } else {

    //show deactivate buttton

    $("#"+del_id +".btn-danger").show();

    //hide other button

    $("#"+del_id +".btn-success").hide();

  }

}

更新 1：

因为你习惯if-else显示按钮所以我在这里忘记了在这种情况下其他按钮将不存在这就是 jquery 无法找到其他按钮并显示空白的原因。现在，要解决这个问题你需要在你的 php 代码中进行一些更改您显示表格的位置。您需要进行的更改如下：

改变这个：

<?php if($ConRow['status']=='A') { ?>

<td><button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-danger btn-sm">De-Activate</button> </td>

<?php } else if($ConRow['status']=='D') { ?> 

<td><button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-success btn-sm">Activate</button> </td> 

<?php } ?>  

到下面：

<td> <div class="<?php echo $ConRow['con_id']; ?>"> <?php if($ConRow['status']=='A') { ?>

<button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-danger btn-sm">De-Activate</button> 

<?php } else if($ConRow['status']=='D') { ?> 

<button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-success btn-sm">Activate</button> 

<?php } ?> </div> </td>  

现在，在 ajax success 函数中，我们将使用.html在里面添加按钮<div></div>。所以 ajax 将如下所示：

if (d == "A") {

 $("." + del_id).html('<button id="' + del_id + '" class="delbutton btn btn-danger btn-sm">De-Activate</button>');

} else {

  $("." + del_id).html('  <button id="' + del_id + '" class="delbutton btn btn-success btn-sm">Activate</button> ');

}