Question

我试图在用户填写输入字段后使用JavaScript显示图像。当使用输入type =“ text”时，我得到了显示URL的信息，但是当我尝试将其更改为img标签时，它将返回[object 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

您为您的用例错误地调用了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);

Answer 2

在这些行中，您进行了错误的分配。

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;

用户输入后显示图像

2 个答案: