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

【问题标题】：how do i change color of a button and load a question if another button is pressed without loading the whole page?如果按下另一个按钮而不加载整个页面，我如何更改按钮的颜色并加载问题？
【发布时间】：2019-04-06 15:29:08
【问题描述】：

我正在制作一个在线考试网站，用户可以在其中登录进行考试。
我在问题旁边有一个面板，如果您单击按钮，则会给出不同的问题编号按钮，问题将从数据库中出现而不加载整个页面。我遇到了如何做到这一点的问题？

HTML 代码-

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

jquery ajax和php代码怎么写？

【问题讨论】：

当您单击每个按钮时执行 ajax 调用，它不会呈现整个页面。
我该如何编写ajax调用？
@KaunishRoy 检查下面的答案。

标签： php jquery ajax

【解决方案1】：

我已经创建了php文件（test.php）和客户端执行ajax调用并根据问题id获取问题。代码如下

PHP文件代码（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>

【讨论】：