Отображение изображения после ввода пользователя

Question

Я пытаюсь показать изображение с помощью JavaScript после того, как пользователь заполняет поле ввода. Я получил его, чтобы показать URL при использовании input type = "text", но когда я пытаюсь изменить его на тег img, он возвращает [объект Object]. Это возможно сделать?

input.php

<div class='col1;'> <img style='width:20%' src="" alt="" id="img" ></div>
<script type="text/javascript">
$(document).ready(function() {
    function myrequest2(e) {
        var mn = $('.auto2').val();
        var pn = $('.auto').val();

        $.ajax({
                method: "GET",
                url: "autofill2.php",
                dataType: 'json',
                data: {
                        inputmn: mn,
                        inputpn: pn
                },

                success: function( responseObject ) {
                        var x = $('#img').val( responseObject.image);
                        document.getElementById("img").src = x;
                        document.getElementById("img").alt = x;
                    },
                    failure: function() {
                            alert('fail');
                    }
            });
    }

    $('#mn').change(function(e) {
            e.preventDefault();
            myrequest2();
        });
    });

</script>

autofill2.php

<?php
$conn = mysqli_connect($host, $username, $password, $db);

$inputmn = $_GET['inputmn'];
$inputpn = $_GET['inputpn'];
$return = mysqli_query($conn, "SELECT image FROM parts WHERE ModelNum = '$inputmn' and PartNum = '$inputpn' LIMIT 1");
$rows = mysqli_fetch_array($return);
$formattedData = json_encode($rows);
print $formattedData;

?>

Кроме того, я знаю, что мне нужны подготовленные заявления. Просто заставить это работать в первую очередь

Answer 1

В этих строках вы делаете неправильное назначение.

var x = $('#img').val( responseObject.image);
document.getElementById("img").src = x;
document.getElementById("img").alt = x;

Вы должны изменить его на:

document.getElementById("img").src = responseObject.image;
document.getElementById("img").alt = responseObject.image;

Answer 2

Вы неправильно вызываете параметр responseObject для своего варианта использования. Переменная x является селектором jQuery. Этот селектор не содержит данных изображения. Поскольку вы установили изображение src в селектор (что недопустимо), оно вернулось к тексту alt. Поскольку для вашего текста alt также был установлен селектор jQuery, для него была запущена функция toString(), и, таким образом, вы увидели [Object object], поскольку селектор jQuery не имеет переопределенного значения toString() , Чтобы решить эту проблему: Измените x на responseObject.image и измените alt на описание изображения.

 success: function( responseObject ) {
    var x = responseObject.image // assuming .image is img data
    document.getElementById("img").src = x;
    document.getElementById("img").alt = "Nice image";
},

Одна небольшая нота, которую вы смешиваете и сопоставляете с jQuery. Если вы хотите постоянно использовать jQuery, вы можете изменить document.getElementById("img") = x на $("#img").attr("src", x);