通过Ajax保存多个PHP测验问题及其对数据库的答案，而无需刷新页面

Question

我需要一些从StackOverflow获得的PHP代码的帮助。这是一个在线测验。它是如此漂亮的代码，我能够修改代码以将测验结果发送到MySQL数据库，同时像最初一样显示结果，效果很好。但是，我想进一步修改它，以便它将使用ajax或与PHP混合在一起的javascript将详细信息发送到数据库，而无需刷新页面。这对我来说变得非常困难，我决定返回此论坛以获取结果。

该代码由Gillian Lo Wong发布，后来由Iver Saladaga Anoos编辑。

我将感谢您的专业人士为您提供帮助。这是原始代码：

<?php 
$QandA = array(
    1 => array(
        'Question' => '1. CSS stands for',
        'Options' => array(
            'A' => 'Computer Styled Sections',
            'B' => 'Cascading Style Sheets',
            'C' => 'Crazy Solid Shapes'
        ),
        'CorrectAnswer' => 'B'
    ),
    2 => array(
        'Question' => '2. What is the Capital of the Philippines',
        'Options' => array(
            'A' => 'Cebu City',
            'B' => 'Davao City',
            'C' => 'Manila City'
        ),
        'CorrectAnswer' => 'C'
    )
);

if(isset($_POST['answers'])){

// Get submitted answers.
$Answers = $_POST['answers'];

// Now this is fun, automated question checking/marking and displaying of your result! ;)
foreach($QandA as $QuestionNo => $ArrOfVals){
  // Echo the question
  echo $ArrOfVals['Question'].'<br />';

  if($Answers[$QuestionNo] != $ArrOfVals['CorrectAnswer']){

  echo 'Your Choice: <span style="color: red;">'.$ArrOfVals['Options'][$Answers[$QuestionNo]].'</span><br>';  
  echo 'Correct answer: <span style="color: green;">'.$ArrOfVals['Options'][$ArrOfVals['CorrectAnswer']].'</span>';
    }else{
    echo 'Your Choice: <span style="color: green;">'.$ArrOfVals['Options'][$Answers[$QuestionNo]].'</span><br>';
    echo 'Correct answer: <span style="color: green;">'.$ArrOfVals['Options'][$Answers[$QuestionNo]].'</span>';
    $counter++;
   }
    echo '<br /><hr>'; 
    if($counter==""){ 
       $counter='0';
       $results = "Your score: $counter/2"; 
      }else{ 
         $results = "Your score: $counter/2"; 
           }
      }                           
      echo $results;
}else{  
?>

<form action="" method="post" id="quiz">
  <?php foreach ($QandA as $QuestionNo => $ArrOfVals){ ?>
  <h3><?php echo $ArrOfVals['Question']; ?></h3>
  <?php 
        foreach ($ArrOfVals['Options'] as $Letter => $option){ 
                $questionID = 'question-'.$QuestionNo.'-answers-'.$Letter;
    ?>
  <div>
    <input type="radio" name="answers[<?php echo $QuestionNo; ?>]" id="<?php echo $questionID; ?>" value="<?php echo $Letter; ?>" />
    <label for="<?php echo $questionID; ?>"><?php echo $Letter; ?>) <?php echo $option; ?> </label>
  </div>
  <?php } ?>
  <?php } ?>
  <input type="submit" value="Submit Quiz" />
</form>
<?php } ?>

这是我修改后的详细信息，用于将详细信息发送到数据库：

    <?php 
$QandA = array(
    1 => array(
        'Question' => '1. CSS stands for',
        'Options' => array(
            'A' => 'Computer Styled Sections',
            'B' => 'Cascading Style Sheets',
            'C' => 'Crazy Solid Shapes'
        ),
        'CorrectAnswer' => 'B'
    ),
    2 => array(
        'Question' => '2. What is the Color of your first Car',
        'Options' => array(
            'A' => 'Red',
            'B' => 'Ble',
            'C' => 'Green'
        ),
        'CorrectAnswer' => 'C'
    ),
    3 => array(
        'Question' => '3. What is the Capital of the Philippines',
        'Options' => array(
            'A' => 'Cebu City',
            'B' => 'Davao City',
            'C' => 'Manila City'
        ),
        'CorrectAnswer' => 'C'
    )
);

if(isset($_POST['answers'])){

$servername = "localhost";
$username = "root";
$password = "nis";
$dbname = "cbt";

// establish connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Get submitted answers.
$Answers = $_POST['answers'];

// Now this is fun, automated question checking/marking and displaying of your result! ;)
foreach($QandA as $QuestionNo => $ArrOfVals){

$qst =  $ArrOfVals['Question'];

  // Echo the question
  echo $ArrOfVals['Question'].'<br />';

  if($Answers[$QuestionNo] != $ArrOfVals['CorrectAnswer']){

  //arrange variables for storage in database
  $you  =  $ArrOfVals['Options'][$Answers[$QuestionNo]]; 
  $us   =  $ArrOfVals['Options'][$ArrOfVals['CorrectAnswer']];

  //insert into database
    $sql = "INSERT INTO results (qstno, question, youranswr, correctanswr) VALUES ('', '$qst', '$you', '$us')";
    $conn->query($sql);
    $insert = TRUE;

  //print out answers
  echo 'Your Choice: <span style="color: red;">'.$ArrOfVals['Options'][$Answers[$QuestionNo]].'</span><br>';
  echo 'Correct answer: <span style="color: green;">'.$ArrOfVals['Options'][$ArrOfVals['CorrectAnswer']].'</span>';
    }else{

    //arrange variables for storage in database
    $you    =  $ArrOfVals['Options'][$Answers[$QuestionNo]]; 
    $us     =  $ArrOfVals['Options'][$Answers[$QuestionNo]];

    //insert into database
    $sql = "INSERT INTO results (qstno, question, youranswr, correctanswr) VALUES ('', '$qst', '$you', '$us')";
    $conn->query($sql);
    $insert = TRUE;

    //print out answers
    echo 'Your Choice: <span style="color: green;">'.$ArrOfVals['Options'][$Answers[$QuestionNo]].'</span><br>';
    echo 'Correct answer: <span style="color: green;">'.$ArrOfVals['Options'][$Answers[$QuestionNo]].'</span>';
    $counter++;
   }
    echo '<br /><hr>'; 
    if($counter==""){ 
       $counter='0';
       $results = "Your score: $counter/3"; 
      }else{ 
         $results = "Your score: $counter/3"; 
           }
      }                           
      echo ($insert === TRUE) ? "Your result was Successfully Saved!" : "Error Saving recods!";
      echo "<br />";
      echo $results;
      $insert = FALSE;
}else{  
?>

<form action="" method="post" id="quiz">
  <?php foreach ($QandA as $QuestionNo => $ArrOfVals){ ?>
  <h3><?php echo $ArrOfVals['Question']; ?></h3>
  <?php 
        foreach ($ArrOfVals['Options'] as $Letter => $option){ 
                $questionID = 'question-'.$QuestionNo.'-answers-'.$Letter;
    ?>
  <div>
    <input type="radio" name="answers[<?php echo $QuestionNo; ?>]" id="<?php echo $questionID; ?>" value="<?php echo $Letter; ?>" />
    <label for="<?php echo $questionID; ?>"><?php echo $Letter; ?>) <?php echo $option; ?> </label>
  </div>
  <?php } ?>
  <?php } ?>
  <input type="submit" value="Submit Quiz" />
</form>
<?php } ?>