如何在PHP、AJAX和JQuery中实现下拉选单显示图片

问题描述 #

使用PHP、AJAX和jQuery开发动态下拉选单，目标是选择下拉选项后显示对应队伍的Logo图片。目前选择选项后能正常显示图片文件名，但无法显示实际图片，怀疑问题出在AJAX代码的$("#empFileName").text(empData.filename);这一行，尝试改用attr方法未成功，请求解决。

数据库表结构 #

team表（存储队伍ID与简称） #

gallery表（存储队伍ID、全称及Logo文件名） #

现有代码 #

index.php #

<div class="container">
    <h2>Drop-down Selection Data Load with ajax, PHP & MySQL</h2>       
    <div class="page-header">
        <h3>
            <select id="employee" class="form-control" >
                <option value="" selected="selected">Select Employee Name</option>
                <?php
                $sql = "SELECT id, name FROM team";
                $resultset = mysqli_query($conn, $sql);
                while( $rows = mysqli_fetch_assoc($resultset) ) { 
                ?>
                <option value="<?php echo $rows["id"]; ?>"><?php echo $rows["name"]; ?></option><?php } ?>
            </select>
        </h3>   
    </div>  
    <div class="hidden" id="errorMassage"></div>
    <table class="table table-striped hidden" id="recordListing">
        <thead>
          <tr>
            <th>Team Name</th>
            <th>Logo</th>
          </tr>
        </thead>
        <tbody>
          <tr> <!-- 动态图片将显示在这里 -->
            <td id="empName"></td>
            <td id="empFileName"></td>
          </tr>
        </tbody>            
    </table>       
</div>

getJS.js #

$(document).ready(function () {
  $("#employee").change(function () {
    var id = $(this).find(":selected").val();
    var dataString = "empid=" + id;
    $.ajax({
      url: "getlogo.php",
      dataType: "json",
      data: dataString,
      cache: false,
      success: function (empData) {
        if (empData) {
          $("#errorMassage").addClass("hidden").text("");
          $("#recordListing").removeClass("hidden");
          $("#empId").text(empData.id);
          $("#empName").text(empData.name);
          $("#empFileName").text(empData.filename);
        } else {
          $("#recordListing").addClass("hidden");
          $("#errorMassage").removeClass("hidden").text("No record found!");
        }
      },
    });
  });
});

getlogo.php #

<?php
include_once("db_connect.php");
if($_REQUEST['empid']) {
    $sql = "SELECT name, filename 
    FROM gallery 
    WHERE id='".$_REQUEST['empid']."'";
    $resultSet = mysqli_query($conn, $sql); 
    $empData = array();
    while( $emp = mysqli_fetch_assoc($resultSet) ) {
        $empData = $emp;
    }
    echo json_encode($empData);
} else {
    echo 0; 
}
?>

解决方案 #

1. 修改AJAX代码生成图片标签 #

问题核心是#empFileName是<td>元素，直接设置文本只会显示文件名，需要在这个单元格内插入<img>标签才能显示图片。修改getJS.js中的对应行：

将：

$("#empFileName").text(empData.filename);

替换为：

// 请根据实际图片存放路径调整src的值，示例假设图片放在项目根目录的images文件夹下
$("#empFileName").html('<img src="images/'+empData.filename+'" alt="'+empData.name+' Logo" style="width: 100px; height: auto;">');

如果图片和index.php在同一目录，直接写src="'+empData.filename+'"即可。

2. 修复SQL注入风险（可选但推荐） #

原getlogo.php直接将用户输入拼进SQL语句，存在注入风险，改用预处理语句：

修改getlogo.php为：

<?php
include_once("db_connect.php");
if(isset($_REQUEST['empid']) && is_numeric($_REQUEST['empid'])) {
    // 使用预处理语句防止SQL注入
    $stmt = $conn->prepare("SELECT name, filename FROM gallery WHERE id = ?");
    $stmt->bind_param("i", $_REQUEST['empid']);
    $stmt->execute();
    $resultSet = $stmt->get_result();
    
    $empData = array();
    if($emp = $resultSet->fetch_assoc()) {
        $empData = $emp;
    }
    echo json_encode($empData);
} else {
    echo json_encode(null); 
}
?>

3. 验证图片路径正确性 #

确保图片文件确实存放在你指定的路径下，比如images/habs-svg.svg可以通过浏览器直接访问，路径无误才能正常显示。

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