Question

我有一个MySQL数据库，用于存储图像的路径。

我希望显示的图像根据所选的单选按钮选项进行更改。我正在尝试使用AJAX更新显示的图像，但是我对该技术的了解非常有限。

这是单选按钮列表和图像。当所选元素更改时，将调用JS函数。

<img class="img-responsive center-block" src="../images/1.png" id="buildimage" />

<ul id="radio" class="input-list">
  <li>
    <input id="item-1" name="config-prod" value="1.00" type="radio" onchange="updateImage(this.id);">
    <label for="item-1">Item 1</label>
  </li>
  <li>
    <input id="item-2" name="config-prod" value="2.00" type="radio" onchange="updateImage(this.id);">
    <label for="item-2">Item 2</label>
  </li>
  <li>
    <input id="item-3" name="config-prod" value="3.00" type="radio" onchange="updateImage(this.id);">
    <label for="item-3">Item 3</label>
  </li>
</ul>

这是功能updateImage：

<script>
    function updateImage(caseid) {
        selectmenuID = document.getElementById(caseid);

        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("buildimage").innerHTML = this.responseText;
            }
        };
        xhttp.open("GET", "displayImage.php", true);
        xhttp.send("id='selectmenuID'");

    }

</script>

检索路径的PHP文件：

<?php

require_once("config.php");

$id = $_GET["id"];

$stmt = $pdo->prepare("SELECT link FROM cases WHERE id=?");
$stmt->bind_param("s", $id);
$stmt->execute([$id]);
$result = $stmt->fetch();
echo '<img src="data:image/jpeg;base64,'.base64_encode($result['image'] ).'"/>';

?>

我遇到的问题是我不了解如何使用AJAX来调用传递所选元素ID的PHP文件，然后根据响应更改src文件路径。

这可能吗？谢谢。

Answer 1

首先，您必须使用xhttp.responseText而不是this.responseText来从服务器获取响应。

然后，您应该直接替换图片的src属性，而不要尝试替换其html：

document.getElementById("buildimage").src = xhttp.responseText;

服务器端：

echo $result['image'];

您还必须替换此行：

xhttp.send("id='selectmenuID'");

通过：

xhttp.send("id="+selectmenuID);

当选定的单选按钮更改时，从MySQL数据库检索图像引用

1 个答案: