利用PHP实现查询学生成绩 - 《Ajax》

score.html—查询页
result.php—结果页
CSS样式

创建两个页面，score.html作为查询页面，result.php作为结果输出页面。
当用户输入正确的考号，跳转result页面并输出各学科成绩。如果考号错误则提示“抱歉！您输入的考号不存在。”

代码如下：

score.html—查询页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生成绩查询</title>
    <link rel="stylesheet" href="css/score.css">
</head>
<body>
    <div class="container">
        <h3>学生成绩查询</h3>
        <form action="result.php" method="get">
            <input placeholder="请输入您的学号" name="codeNum" class="num">
            <input type="submit" value="查询" class="subBtn">
        </form>
    </div>
</body>
</html>

result.php—结果页

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>结果查询</title>
    <link rel="stylesheet" href="css/score.css">
</head>
<body>
    <?php
        $data = array();
        $data['123'] = array('name'=>'张三','chinese'=>'120','math'=>'98','english'=>'101','history'=>'88','geography'=>'93');
        $data['321'] = array('name'=>'李四','chinese'=>'110','math'=>'89','english'=>'42','history'=>'113','geography'=>'70');
        $data['456'] = array('name'=>'王五','chinese'=>'90','math'=>'120','english'=>'76','history'=>'85','geography'=>'88');
        $codeNum = $_GET['codeNum'];
    ?>
    <?php
        //判断数组中是否包含索引号
        if(array_key_exists($codeNum,$data)){
            $result = $data[$codeNum];
    ?>
    <div class="container resBox">
        <h3><span><?php echo $result['name'] ?></span>个人成绩：</h3>
        <table class="scoreList">
            <thead>
                <tr>
                    <th>语文</th>
                    <th>数学</th>
                    <th>英语</th>
                    <th>历史</th>
                    <th>地理</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><?php echo $result['chinese'] ?></td>
                    <td><?php echo $result['math'] ?></td>
                    <td><?php echo $result['english'] ?></td>
                    <td><?php echo $result['history'] ?></td>
                    <td><?php echo $result['geography'] ?></td>
                </tr>
            </tbody>
        </table>
    </div>
    <?php
        }else{
    ?>
        <div class="msg">抱歉！您输入的考号不存在。</div>
    <?php
        }
    ?>
</body>
</html>

CSS样式

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
input{
    display: block;
    outline: none;
}
.container{
    width: 260px;
    margin: 20px auto;
}
.resBox{
    width: 360px;
    margin: 20px auto;
}
.container h3{
    font-size: 18px;
    text-align: center;
    color: #555;
}
.container input{
    width: 100%;
    height: 30px;
}
.container .num{
    border: 1px solid #ccc;
    padding-left: 5px;
    font-size: 15px;
    margin: 15px 0;
}
.container .num::-webkit-input-placeholder{
    color: #ccc;
}
.container .subBtn{
    background: steelblue;
    border: none;
    border-radius: 2px;
    color: #fff;
    font-size: 15px;
}
.container span{
    color: steelblue;
}
.scoreList{
    width: 100%;
    border-collapse: collapse;
    margin: 15px auto;
}
.scoreList thead{
    background: #eee;
}
.scoreList th,td{
    height: 36px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 36px;
    font-size: 15px;
    color: #555;
}
.msg{
    text-align: center;
    margin: 20px auto;
    font-size: 16px;
    color: #555;
}