javascript - 如何使用JS PHP AJAX确定分数和字母等级
问题描述
所以我做了一个关于考试的程序,我需要确定学生的字母成绩,但首先,他们必须回答一些问题,然后根据学生获得的分数,学生将获得字母成绩,有人推荐我使用 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">×</span> </a>
<div class = "pic">
</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(score) {
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');
}
};
xhttp.open("post", "examExtension.php", true);
// Send the score like this.
// This will look like 'score=18' and can be read by your PHP file.
xhttp.send('score=' + score);
}
</script>
这对于examExtension.php:
<?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;
?>
最后,这是基于学生正确点击了多少单选按钮来计算分数。
<script>
const scoreElement = document.getElementById("score");
const yesButton = document.getElementById("yes");
yesButton.addEventListener("click", function() {
let numberOfCorrectAnswers = document.querySelectorAll("input[type=radio].correct:checked").length;
// Pass amount of correct answers to the loadDoc function.
loadDoc(numberOfCorrectAnswers);
console.log('Calculating grade');
});
</script>
解决方案
推荐阅读
- php - 如何从传递给模态的变量中获取数据?
- node.js - NodeJS 中的 EventEmitters 是否会消耗资源?
- vb6 - 如何避免复选框放在前面
- javascript - 如何在 VueJS 中处理(或忽略)空属性?
- javascript - 请求被 Chrome66 上的 pause() 调用中断
- c# - 如何优雅地从定时器事件中捕获异常?
- c++ - 如何为具有另一个类的对象的类编写复制构造函数
- php - 即使使用正确的凭据,PHP ftp_login 也会失败
- python-3.x - 字典列表上的数学运算(python 3.6)
- apache-flink - 在 flink 中使用翻转 Windows 时,我可以为每个键设置不同的时区偏移量吗?