如何在 PHP、AJAX 和 JQuery 中显示带有选定下拉列表的图像

Question

这里涉及到PHP、AJAX、JQuery。希望这是一个简单的问题。

我有一个动态下拉菜单，当下拉菜单被选中时显示内容。我要显示的内容是图像。我正在使用两张桌子 - 一张是我的团队桌子，另一张桌子是我的徽标。

团队

|id|name |
|--| --- |
|1 | MTL |
|2 | BOS |
|3 | CGY |
|4 | EDM |

gallery

|id|name      |**filename**  |
|--| ---      |              |
|1 | Montreal |habs-svg.svg  |
|2 | Boston   |bruins-svg.svg|
|3 | Calgary  |flames-svg.svg|
|4 | Edmonton |oilers-svg.svg|

它完美地工作。例如，当我在“团队”的下拉菜单中选择 MTL 时，它将以文本格式显示相应的文件名，即“habs-svg.svg”。所以我所有的 Jquery 和 AJAX 都运行良好。

我怎样才能显示实际图像而不是图像名称？请参阅下面的代码以获取我的 index.php、getJS.js 和 getlogo.php：

**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> //My images that are dynamically printing will show here 
            <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; 
}
?>

我知道如何使用 PHP 插入图像，但我觉得它与我的 AJAX 有关，特别是在这一行：

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

到目前为止，似乎我需要使用“attr”而不是“text”？我在下面尝试过，但似乎没有用：

          $("#empFileName").attr("filename", empData.filename);

提前谢谢你！

Answer 1

您使用

<img

标记在 HTML 文档中显示图像，图像文件的 URL 作为其

src

。所以

$("#empFileName").html('<img src="empData.filename" />");

应该将图像放在你想要的表格单元格中（假设图像文件存储在网站上与你加载它的页面相同的文件夹中）。

文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img