如何用AJAX、PHP和MySQL实现选择项后填充文本框数据

你的代码存在几个核心问题导致无法正常运行，以下是逐一修正：

核心问题点 #

• AJAX请求未指定url参数，浏览器不知道向哪个PHP接口发送请求
• 未引入jQuery库，$.ajax无法执行
• PHP代码未处理查询无结果的情况，会触发json_encode报错
• SQL使用旧的表连接语法，可读性差且易出错
• HTML的select未从数据库加载有效选项，用户无法选择地点

修正后的完整代码 #

1. HTML页面（含动态加载地点选项） #

<!-- 先引入jQuery，必须放在AJAX代码之前 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<div>
    <label for="place">Place</label>
    <select name="place" id="place" onchange="myplace();">
        <option value="">--Select Place--</option>
        <?php
        // 从数据库加载地点选项
        $sql = "SELECT DISTINCT place FROM all_data";
        $result = $conn->query($sql);
        while($row = $result->fetch_assoc()){
            echo "<option value='{$row['place']}'>{$row['place']}</option>";
        }
        ?>
    </select>       
</div>

<div>
    <label for="myname">Name</label>
    <input type="text" name="myname" id="myname" value="<?php echo isset($saved_name) ? $saved_name : ''; ?>">  
</div>

<div>
    <label for="myamnt">Amount</label>
    <input type="text" name="myamnt" id="myamnt" value="<?php echo isset($saved_amount) ? $saved_amount : ''; ?>">  
</div>

<script>
function myplace() 
{        
    var selectedPlace = document.getElementById("place").value;
    if(!selectedPlace) return; // 未选择地点时不发送请求

    $.ajax({
        type : "POST",
        url : "get_place_data.php", // 指定PHP接口文件路径
        data : {
            myinitplace : selectedPlace 
        },
        dataType :  "JSON",
        success : function(data){
            if(data){
                document.getElementById("myname").value = data.name || '';
                document.getElementById("myamnt").value = data.myacc || '';
            }
        },
        error: function(xhr, status, error){
            // 调试用，打印错误信息
            console.log("请求错误：", error);
        }
    })  
}
</script>

2. PHP接口文件（命名为get_place_data.php） #

<?php
// 先建立数据库连接，示例：
// $conn = new mysqli("localhost", "username", "password", "database_name");
// if($conn->connect_error) die("连接失败：".$conn->connect_error);

header('Content-Type: application/json'); // 必须设置JSON响应头

if(!empty($_POST["myinitplace"])){        
    // 使用JOIN语法替代旧的逗号连接，更规范
    $sql = "SELECT ad.name, ad.amount 
            FROM all_data ad
            JOIN my_place mp ON ad.place = mp.place 
            WHERE ad.place = ?";
    
    $stmt = $conn->prepare($sql); 
    $stmt->bind_param("s", $_POST["myinitplace"]);
    $stmt->execute();
    $result = $stmt->get_result(); 

    // 用if而不是while，因为一个地点应该对应一条数据
    if($rows = $result->fetch_assoc()){   
        $data['name'] = $rows['name'];
        $data['myacc'] = $rows['amount'];
    } else {
        // 查询无结果时返回空数据，避免报错
        $data = ['name' => '', 'myacc' => ''];
    }

    $stmt->close(); // 关闭语句
    $conn->close(); // 关闭连接
    echo json_encode($data);
} else {
    echo json_encode(['name' => '', 'myacc' => '']);
}
?>

额外注意事项 #

1. 确保数据库连接信息正确，且all_data和my_place表结构与代码字段匹配
2. 生产环境中要关闭PHP错误显示，避免泄露敏感信息
3. 可以给输入框添加只读属性（readonly），防止用户手动修改

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