温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Showing Image after user input
ajax javascript php

javascript - 用户输入后显示图像

发布于 2020-03-27 11:42:06

我想在用户填写输入字段后使用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;

?>

另外,我知道我需要准备好的陈述。只是先让它起作用

查看更多

查看更多

提问者
egar
被浏览
68
IMustBeSomeone 2019-07-03 23:33

responseObject为用例错误地调用了该参数。x变量是jQuery选择器。该选择器不包含图像数据。由于您将图像src设置为选择器(这是无效的),因此它会退回到alt文本上。由于您也将alt文本设置为jQuery选择器,toString()因此运行了该函数,因此您看到了[Object object],因为jQuery选择器没有重写toString()为了解决这个问题:更改xresponseObject.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);