如果在不加载整个页面的情况下按下另一个按钮，我如何更改按钮的颜色并加载问题？

Question

I am making an online exam website where users can log in give exams.
I have a panel beside the question where different question number button are given if you click on the buttons the question will appear from the database without loading the whole page.I am running into the problem of how do I do that?

THE HTML CODE-

**<div>
<button type="button" class="btn btn-info custom" style="margin-right:16px">13</button>
<button type="button" class="btn btn-info custom" style="margin-right:16px">14</button>
<button type="button" class="btn btn-info custom" style="margin-right:16px">15</button>
</div>**

How to write the jquery ajax and php code?

Answer 1

I have created php file (test.php) and the client side which executes the ajax call and gets the question according to question id.Code is below

PHP file code (test.php)

<?php 
//it's used because the server is local, without it throws console error
//and doesn't allow to proceed with the operation.
//No need for remote servers
header('Access-Control-Allow-Origin: *');

if(isset($_GET['questionId'])){
    $qId = $_GET['questionId'];

    if($qId == 12){
      echo "Question 1";
    }

    if($qId == 13){
      echo "Question 2";
    }
}

?>

$(".btn > button").click(function(){
    //get button text and send it to server file to give you back response accordingly
    var qId = $(this).text();
    alert("Question ID:"+qId);
    
    /*$.ajax({
       method:'get',
       url:'http://localhost/test.php'
       //send question ID to server file
       data:{questionId: qId }
    }).done(function( data ) {
       console.log( "Sample of data:"+data);
    }).fail(function( jqXHR, textStatus ) {
       alert( "Request failed: " + textStatus );
    });*/
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">
<button type="button" class="btn btn-info custom" style="margin-right:16px">13</button>
<button type="button" class="btn btn-info custom" style="margin-right:16px">14</button>
<button type="button" class="btn btn-info custom" style="margin-right:16px">15</button>
</div>

</div>