实现下拉选客户端名后自动填充MySQL对应描述的功能求助

一、后端接口实现（新建get_client_desc.php） #

专门处理前端的AJAX请求，根据客户端名称返回对应描述，同时做SQL注入防护：

<?php
// 替换成你的数据库连接信息
$conn = mysqli_connect("localhost", "数据库用户名", "数据库密码", "数据库名");

if (!$conn) {
    die(json_encode(['success' => false, 'msg' => '数据库连接失败']));
}

if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['client_name'])) {
    $client_name = trim($_GET['client_name']);
    
    // 使用预处理语句避免SQL注入
    $stmt = $conn->prepare("SELECT description_ FROM contract WHERE client_name = ?");
    $stmt->bind_param("s", $client_name);
    $stmt->execute();
    $result = $stmt->get_result();
    
    if ($row = $result->fetch_assoc()) {
        echo json_encode(['success' => true, 'description' => $row['description_']]);
    } else {
        echo json_encode(['success' => false, 'description' => '无对应描述']);
    }
    
    $stmt->close();
} else {
    echo json_encode(['success' => false, 'description' => '参数错误']);
}

mysqli_close($conn);
?>

二、修改前端页面代码 #

修复原代码的错误，添加原生JS实现下拉框联动逻辑：

<?php
$err = "";
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 接收表单提交的参数
    $client = trim($_POST['client'] ?? '');
    $description = trim($_POST['description'] ?? '');
    $guard = trim($_POST['guard'] ?? '');
    $category = trim($_POST['category'] ?? '');
    $location = trim($_POST['location'] ?? '');
    $date = trim($_POST['date'] ?? '');
    
    // 验证所有必填字段
    if(empty($client) || empty($description) || empty($guard) || empty($category) || empty($location) || empty($date)){
        $err = "<font color='red'>所有字段为必填项</font>";   
    }else{
        // 用预处理语句插入数据，避免SQL注入
        $stmt = $conn->prepare("INSERT INTO schedule(client_name, description_, guard, category, _location, date) VALUES(?, ?, ?, ?, ?, NOW())");
        $stmt->bind_param("sssss", $client, $description, $guard, $category, $location);
        
        if ($stmt->execute()) {
            $err = "<font color='green'>日程添加成功</font>";
        } else {
            $err = "<font color='red'>错误: ".mysqli_error($conn)."</font>";
        }
        $stmt->close();
    }
}
?>

<h2>添加新日程</h2>
<form method="post">
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-4"><?php echo $err;?></div>
    </div>
    
    <div class="form-group col-md-6">
        <label for="inputState">客户端名称</label>
        <select id="inputState" name="client" class="form-control" required>
            <option selected>请选择...</option>
            <?php 
                $sql = mysqli_query($conn, "SELECT client_name FROM contract");
                while($res = mysqli_fetch_array($sql)){
                    echo "<option value='".$res['client_name']."'>".$res['client_name']."</option>";
                }
            ?>
        </select>
    </div>
    
    <div class="form-group col-md-6">
        <label for="description">合同描述</label>
        <!-- 修复原代码中重复name的错误，设置为只读防止手动修改 -->
        <input type="text" name="description" id="description" class="form-control" readonly>
    </div>

    <!-- 补充原代码缺失的必填字段 -->
    <div class="form-group col-md-6">
        <label for="guard">Guard</label>
        <input type="text" name="guard" class="form-control" required>
    </div>
    <div class="form-group col-md-6">
        <label for="category">Category</label>
        <input type="text" name="category" class="form-control" required>
    </div>
    <div class="form-group col-md-6">
        <label for="location">Location</label>
        <input type="text" name="location" class="form-control" required>
    </div>
    <div class="form-group col-md-6">
        <label for="date">Date</label>
        <input type="date" name="date" class="form-control" required>
    </div>

    <div class="form-group col-md-12">
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</form>

<!-- 原生JS实现下拉框联动 -->
<script>
document.addEventListener('DOMContentLoaded', function(){
    const clientSelect = document.getElementById('inputState');
    const descriptionInput = document.getElementById('description');

    clientSelect.addEventListener('change', function(){
        const clientName = this.value;
        if(clientName !== "请选择..."){
            // 发送AJAX请求
            const xhr = new XMLHttpRequest();
            xhr.open('GET', `get_client_desc.php?client_name=${encodeURIComponent(clientName)}`, true);
            xhr.onload = function(){
                if(this.status === 200){
                    try{
                        const response = JSON.parse(this.responseText);
                        descriptionInput.value = response.success ? response.description : response.description;
                    }catch(e){
                        descriptionInput.value = "加载描述失败";
                    }
                }else{
                    descriptionInput.value = "加载描述失败";
                }
            };
            xhr.onerror = function(){
                descriptionInput.value = "加载描述失败";
            };
            xhr.send();
        }else{
            // 选择默认选项时清空描述
            descriptionInput.value = "";
        }
    });
});
</script>

三、核心修改说明 #

• SQL注入防护：所有数据库操作改用预处理语句，彻底避免直接拼接用户输入导致的注入风险
• 联动逻辑：用原生JS监听下拉框的change事件，实时请求后端接口获取对应描述并填充到输入框
• 修复原代码问题：删除重复的name="client"输入框，修正插入逻辑中错误的提示信息赋值，补充缺失的必填表单字段
• 用户体验优化：将描述输入框设置为只读，防止用户手动修改；选择默认选项时自动清空描述框

内容的提问来源于stack exchange，提问作者Arbaaz Khan