Js, PHP С AJAX: как определить буквенную оценку учащихся, используя javascript с ajax?

Question

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

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

Вот коды:

        <div class = "form">
    <button id = "submit" name = "submit"  value = "submit" > SUBMIT </button>
    <div id="myModal" class="modal">
      <div class="modal-content">
        <h3> Are you sure you want to submit? </h3>
        <button id = "yes" name = "yes" class = "yes" value = "submit" onclick ="loadDoc()"> YES </button>
        <button id = "no" name = "no" class = "no"> NO </button>
      </div>
    </div>


    <div id="myModalLast" class="modalLast">
      <div class="modal-contentLast">
       <a href = "personal.php"> <span class="close">&times;</span> </a>

    <div class = "pic">
        <img src="Logo.png" width = "150" height = "150">
    </div>  
        <h3> Full name: Cathleen Joyce Imperial Almeda </h3>  
        <h3> Total items:20 <p id = "score" name = "scorename"></p> </h3>  
       <h1> <br><p id = "scores" name = "realscores"></p>

       Rank:<p id = "rank"></p>
    </h1> 

      </div>
    </div>
    </div>

Это для части ajax :

        <script>
    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("score").innerHTML =
          this.responseText;
        }
      };
      xhttp.open("post", "examExtension.php", true);
      xhttp.send();
    }
    </script>

И это для examExtension.php:

        <?php


    $score = isset($_POST['score']) ? $_POST['score'] : '';


    if ($score > 19 and $score < 21){
    echo "A+";
    }
    if($score  > 18 and $score< 20){
    echo "A";
    }
    if($score  > 17 and $score< 19){
    echo "A-";
    }
    if($score  > 16 and $score< 18){
    echo "B+";
    }
    if($score  > 15 and $score < 17){
    echo "B";
    }
    if($score  > 14 and $score< 16){
    echo "B-";
    }
    if($score  > 13 and $score< 15){
    echo "C+";
    }
    if($score  > 12 and $score < 14){
    echo "C";
    }
    if($score  > 11 and $score< 13){
    echo "C-";
    }
    if($score  > 10 and $score< 12){
    echo "D+";
    }
    if($score  > 9 and $score< 11){
    echo "D";
    }

    ?>

И, наконец, это для подсчета очков, оно основано на том, сколько переключателей правильно нажал студент.

         <script>document.getElementById("yes").addEventListener("click", function() {
      let numberOfCorrectAnswers = document.querySelectorAll("input[type=radio].correct:checked").length;
      document.getElementById("score").innerHTML = "Your Score: " + numberOfCorrectAnswers;


    });


    </script>

Заранее спасибо за помощь!

Answer 1

Вы получаете пустое значение, потому что вы ничего не отправляете в ваш PHP скрипт. Ваш скрипт examExtension.php ожидает значение с именем score. Без этого значения все операторы if становятся ложными и, следовательно, по вашему запросу ничего не возвращается.

Вы можете передать значение в функцию xhttp.send(), чтобы отправить результат в ваш файл PHP поэтому он может прочитать его и рассчитать для вас результат.

Редактировать

Я использовал Fetch API вместо вашего XMLHttpRequest реализация. Это то же самое, что и в нем они делают AJAX запросов, но более современно.

const scoreElement = document.getElementById("score");
const yesButton = document.getElementById("yes");

yesButton.addEventListener("click", function() {
  let numberOfCorrectAnswers = document.querySelectorAll("input[type=radio].correct:checked").length;

  console.log('Calculating grade');

  // Pass amount of correct answers to the loadDoc function.
  loadDoc(numberOfCorrectAnswers).then((grade) => {
    scoreElement.innerHTML = `Your Score: ${grade}`;
  }).catch(error => {
    console.log('Calculating failed', error);
  });

});

// Use the 'numberOfCorrectAnswers' value as the 'score' variable in this function.
const loadDoc = (score) => fetch("examExtension.php", {
  method: 'POST',
  body: JSON.stringify({ score })
}).then((response) => {
  if (response.status !== 200 && !response.ok) {
    throw new Error(`loadDoc has failed. status: ${response.status}`;
  }
  console.log(Calculation complete);
  return response.text();
});

<?php

// Check if the score is given. If it is, continue. Otherwise stop the script.
if (!isset($_POST['score']) {
  echo 'No score has been given';
  exit;
}

// Convert score value to a number.
$score = intval($_POST['score']);

if ($score > 19 and $score < 21) {
  echo "A+";
} else if ($score > 18 and $score < 20) {
  echo "A";
} else if($score > 17 and $score < 19) {
  echo "A-";
} else if ($score > 16 and $score < 18) {
  echo "B+";
} else if ($score > 15 and $score < 17) {
  echo "B";
} else if ($score > 14 and $score < 16) {
  echo "B-";
} else if ($score > 13 and $score < 15) {
  echo "C+";
} else if ($score > 12 and $score < 14) {
  echo "C";
} else if ($score > 11 and $score < 13) {
  echo "C-";
} else if ($score > 10 and $score < 12) {
  echo "D+";
} else if($score  > 9 and $score < 11) {
  echo "D";
}

exit;

?>