如何更改按钮的颜色并加载问题，如果在不加载整个页面的情况下按下了另一个按钮? [英] how do i change color of a button and load a question if another button is pressed without loading the whole page?

问题描述

我正在建立一个在线考试网站，用户可以登录该网站进行考试.
我在问题旁边有一个面板，如果单击这些按钮，将给出不同的问题编号按钮，该问题将在不加载整个页面的情况下从数据库中出现.我遇到了该怎么做的问题?

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代码?

解决方案

我创建了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> 

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?

解决方案

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>

这篇关于如何更改按钮的颜色并加载问题，如果在不加载整个页面的情况下按下了另一个按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！