如何使用 ajax php 更新数据库表和更改按钮？

Question

我的页面中有一个名为“完成付款”的按钮：

<button style="background-color:#73bd5a; color:#FFF;" id="finish_payment" 
name="finish_payment" type="button" class="btn btn-white active pull-right">
<i class="ion-checkmark-circled"></i></i> Finish Payment</button>

我想要做的是，当我单击此按钮时，我想将表 client_payment 中的付款状态“未付款”更新为“已付款”，并在更新后将按钮文本更改为已付款而不刷新页面。我使用的ajax代码如下：

<script>
$(document).ready(function(){
         $(document).on('click', '.finish_payment', function(){  

       $.ajax({  
            url:"update_payment.php?id=<?php echo $client_id; ?>",  
            method:"POST",  
            dataType:"json",  
            success:function(data){  
              alert(data);  
            }  
       });  
  });  

而我拥有的服务器端代码是：

$connection = mysqli_connect("localhost", "root", "", "bn");
 $client_id=$_GET['id'];

 $query="update client_payment set payment_status='true' where 
  client_id=$client_id";
 if(mysqli_query($connection, $query)){

echo"Payment Complete";
}

Answer 1

像这样更改您的更新查询：

$query="update client_payment set payment_status='true' where 
  client_id='".$client_id."'";  // `'` was missing in where clause.

要更新按钮文本，您可以执行以下操作：

$(document).ready(function(){
     $(document).on('click', '#finish_payment', function(){  // finish_payment is id attribute not class. So using with #

     $.ajax({  
        url:"update_payment.php?id=<?php echo $client_id; ?>",  
        method:"POST",  
        dataType:"json",  
        success:function(data){  
            $('.finish_payment').text('Paid');    // Changing button text here.
        }  
   });