Блог

Главная - Вопросы по программированию - как мне изменить цвет кнопки и загрузить вопрос, если нажата другая кнопка, без загрузки всей страницы?

как мне изменить цвет кнопки и загрузить вопрос, если нажата другая кнопка, без загрузки всей страницы?

#php #jquery #ajax

#php #jquery #ajax

Вопрос:

Я создаю веб-сайт для онлайн-экзаменов, где пользователи могут входить в систему для сдачи экзаменов.
У меня есть панель рядом с вопросом, где указаны кнопки с другим номером вопроса, если вы нажмете на кнопки, вопрос появится из базы данных без загрузки всей страницы.Я сталкиваюсь с проблемой, как мне это сделать?

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-код?

Комментарии:

1. При нажатии каждой кнопки выполняется вызов ajax, который не отображает всю страницу.

2. как мне написать вызов ajax?

3. @KaunishRoy проверьте ответ ниже.

Ответ №1:

Я создал php-файл (test.php ) и клиентская сторона, которая выполняет вызов ajax и получает вопрос в соответствии с идентификатором вопроса.Код приведен ниже

Код файла 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>