如何在单击按钮和处理服务器端代码时进行ajax调用？

Question

我的页面中有一个名为Finish Payment的按钮：

<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>

我想要做的是当我点击此按钮时，我想更新付款状态＆＃34;未支付＆＃34;到＆＃34;付费＆＃34;在表client_payment和更新后，将按钮文本更改为已付款而不刷新页面。我使用的ajax代码如下：

<script>
    $( document ).ready( function( ) {
        $( document ).on( 'click', '#finish_payment', function( ) {
            $.ajax( {
                url: "update_payment.php?id=<?php echo $client_id; ?>";
                        success: function( response ) {
                            $( "#finish_payment" ).html( 'Paid' );
                        }
            } );
        } );
    } );
</script>

我的服务器端代码是：

$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";
}