如何通过下拉框和两个文本框查询数据库学生信息并展示姓名

现有代码存在的问题 #

• 后端PHP接收参数的键名和前端AJAX传递的键名大小写不匹配，无法正确获取请求参数
• 后端SQL执行逻辑没有放到参数非空判断内，参数缺失时会触发变量未定义的报错
• 后端查询到结果后没有将学生姓名输出返回，前端无法拿到查询结果
• 前端AJAX仅绑定了学号输入框的键盘事件，修改班级、分部时不会触发重新查询
• 前端AJAX的请求判断条件使用逻辑或，只要有一个字段不为空就发请求，应该改为三个字段都不为空再发请求
• 查询结果填充到了div容器内，没有按需求回填到学生姓名输入控件中

修复后的代码 #

1. get_student_name.php #

<?php 
ini_set('display_errors', 1); 
error_reporting(E_ALL);
require_once("includes/config.php");
// 初始化返回结果
$name = '';
// 参数名和AJAX传递的保持一致，区分大小写
if(!empty($_POST["Class"]) && !empty($_POST["Division"]) && !empty($_POST["Rollno"])) {
    $class= $_POST["Class"];
    $division= strtoupper($_POST["Division"]);
    $divisionNoSpaces = str_replace(' ', '', $division);
    $rollno= $_POST["Rollno"];
    $rollnoNoSpaces = str_replace(' ', '', $rollno);
    
    $sql ="SELECT FullName,Status FROM tblstudents WHERE Class=:class AND Division=:division AND Rollno=:rollno LIMIT 1";
    $query= $dbh->prepare($sql);
    $query->bindParam(':class', $class, PDO::PARAM_STR);
    $query->bindParam(':division', $divisionNoSpaces, PDO::PARAM_STR);
    $query->bindParam(':rollno', $rollnoNoSpaces, PDO::PARAM_STR);
    $query->execute();
    
    if($query->rowCount() > 0) {
        $results = $query->fetchAll(PDO::FETCH_OBJ);
        $name = $results[0]->FullName;
    }
}
// 直接输出姓名供前端接收
echo $name;
?>

2. 前端AJAX代码 #

$(document).ready(function(){
    // 给三个控件都绑定事件，任意值变动都触发查询
    $('#class, #division, #rollno').on('change keyup', function(){
        var rollno = $('#rollno').val().trim();
        var classname = $('#class').val().trim();
        var division = $('#division').val().trim();
        // 三个字段都不为空才发送请求
        if (rollno != '' && classname != '' && division != '') {
            $.ajax({
                url:"get_student_name.php",
                method:"post",
                data:{
                    Class:classname, 
                    Division:division, 
                    Rollno:rollno
                },
                dataType:"text",
                success:function(data){
                    // 结果直接回填到学生姓名输入框
                    $("#studentName").val(data);
                }
            });
        } else {
            // 字段不全时清空学生姓名
            $("#studentName").val('');
        }   
    });
});

3. 表单代码优化建议 #

原表单中学生姓名输入框的maxlength设置为5，无法容纳较长的姓名，建议调整：

<input class="form-control" type="text" id="studentName" name="studentName" maxlength="20" autocomplete="off" readonly />

内容的提问来源于stack exchange，提问作者Purushottam Patil