Получить ссылку на изображение из базы данных MySQL при изменении выбранной кнопки

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 для вызова файла PHP, передающего идентификатор выбранного элемента, а затем изменить путь к файлу src на основе ответа.

Возможно ли это? Спасибо.

Answer 1

Во-первых, вы должны использовать xhttp.responseText вместо this.responseText, чтобы получить ответ от сервера.

Затем вы должны напрямую заменить атрибут src изображения вместо попытки заменить его html:

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

serverside:

echo $result['image'];

Вы такжедолжны заменить эту строку:

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

на эту:

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