如何使用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"> 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">

</div>  

    <h3> Full name: Cathleen Joyce Imperial Almeda </h3>  

    <h3> Total items:20 <p id = "scoress" 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(scoress) {

  var xhttp = new XMLHttpRequest();

  xhttp.open("POST", "examExtension.php", true);

 xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

      scoreElement.innerHTML = "Your Score: " + this.responseText;

      console.log('Grade calculation complete');

    }

  }

xhttp.send(scoress);

}

</script>

这是 examExtension.php

    <?php

// Check if the score is given. If it is, continue. Otherwise stop the script.

if (!isset($_POST['scoress'])) {

  echo 'No score has been given';

  exit;

}

// Convert score value to a number.

$score = intval($_POST['scoress']);

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+";

} 

Answer 1

在xhttp.send()您忘记设置参数的变量。根据w3schools Ajax post 请求，您必须像这样发布数据：function loadDoc(scoress) {    var xhttp = new XMLHttpRequest();    xhttp.onreadystatechange = function() {        if (this.readyState == 4 && this.status == 200) {            scoreElement.innerHTML = "Your Score: " + this.responseText;            console.log('Grade calculation complete');        }    }    let data = "scoress=" + scoress;    xhttp.open("POST", "examExtension.php", true);    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");    xhttp.send(data);}那应该对你有用！