PHP 作业2.3 判断学生成绩等级

要求


使用ajax后台计算等级后输出到PHP页面,有效输入为0~100。


效果图


PHP 作业2.3 判断学生成绩等级_第1张图片


index.php代码


<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>判断学生成绩等级</title>
</head>
<link rel="stylesheet" />
<style>
  body {
    background-color: #dedede;
  }

  .main {
    border: 7px dotted #00bcff;
    width: 555px;
    margin: 222px auto;
    padding: 0 28px;
    font-size: 28px;
  }

  h1 {
    text-align: center;
  }

  input {
    height: 30px;
    border: none;
  }

  #cj {
    color: red;
  }
</style>

<body>
  <div class="main">
    <h1>学生成绩等级</h1>
    <p>学生姓名:<input type="text" placeholder="请输入姓名" id="name" /></p>
    <p>
      学生分数:<input type="text" placeholder="请输入成绩" id="num" onchange="zl()" />
    </p>
    <p>学生成绩:<span id="cj"> </span></p>
  </div>

  <script>
    function zl() {
      var num = document.getElementById("num").value;

      //1.创建对象
      var xmlhttp;
      if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp = new XMLHttpRequest();
      } else {
        // IE6, IE5 浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      //2.判断对象是否准备就绪
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById("cj").innerHTML = xmlhttp.responseText;
        }
      };
      //3.发出请求
      xmlhttp.open("GET", "data.php?num=" + num, true);
      xmlhttp.send();
    }
  </script>
</body>

</html>

data.php代码



<?php
$num = $_GET["num"];
switch (intval($num / 10)) {
  case 10:
    $str =   "A";
    break;
  case 9:
    $str = "A";
    break;
  case 8:
    $str = "B";
    break;
  case 7:
    $str = "C";
    break;
  case 6:
    $str = "D";
    break;

  case 5:
  case 4:
  case 3:
  case 2:
  case 1:
  case 0:

    $str = "E";
    break;
  default:
    $str = "请输入正确成绩";
}
echo "$str 级";
?>

你可能感兴趣的:(AJAX,PHP,php,ajax)