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 query
while($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>

脚本

<script type="text/javascript" >
        $(function() {

            $(".delbutton").click(function() {
                var del_id = $(this).attr("id");
                var data1 = 'id=' + del_id;
                if (confirm("Sure you want to De-Activate this?.")) {
                    $.ajax({
                        type : "POST",
                        url : "DisableContact.php", 
                        data : data1,
                        success : function() {
                        }
                    });
                    $(this).parents(".record").animate("fast").animate({
                        opacity : "hide"
                    }, "slow");
                }
                return false;
            });
        });
 </script>

PHP

$id = $_POST['id'];
$sel1 = "SELECT status FROM contacts WHERE con_id=".$id."";

$Sel = DB_query($sel1);
$srow = DB_fetch_array($Sel);
if($srow['status']=='A')
{
$sql = "UPDATE contacts SET status='D' WHERE con_id=".$id;
}
else
if($srow['status']=='D')
{
$sql = "UPDATE contacts SET status='A' WHERE con_id=".$id;  
}

$result = DB_query($sql);

在数据库中，状态正在更改，但在表中未显示。

//已更新

<script type="text/javascript" >
        $(function() {

            $(".delbutton").click(function() {
                var del_id = $(this).attr("id");
                var info = 'id=' + del_id;
                if (confirm("Sure you want to De-Activate this?.")) {
                    $.ajax({
                        type : "POST",
                        url : "DisableContact.php", //URL to the delete php script
                        data : info,
                         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();
  }

}
                    });
                    $(this).parents(".record").animate("fast").animate({
                        opacity : "hide"
                    }, "slow");
                }
                return false;
            });
        });
 </script>

PHP

if($srow['status']=='A')
{
$sql = "UPDATE cust_contacts SET status='D' WHERE con_id=".$id;
echo 'A';
}
else
if($srow['status']=='D')
{
$sql = "UPDATE cust_contacts SET status='A' WHERE con_id=".$id;
echo 'D';   
}

$result = DB_query($sql);

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成功功能中，我们将使用.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> ');
}

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

1 个答案: