Question

以下代码会在用户输入ID时自动填写全名和电子邮件。我还想显示用户的图像，但我遇到了问题。

<script type="text/javascript">
    $(function() {
        $( "#techid" ).on( 'blur' , function() {
            searchString = $(this).val();
            var data = 'telefoon='+searchString;
            if(searchString) {
                $.ajax({
                    type    : "POST",
                    url     : "query2.php",
                    data    : data,
                    success : function(html){ 
                        result = String(html).split("|");
                        $("#name").val(result[0]);
                        $("#mail").val(result[1]);
                        $("#avatar").val(result[2]);
                    }
                });    
            }
            return false;
        });
    });
 </script>

我知道我可以像这样显示图像但是如何将它与AJAX集成？

<?php
    error_reporting(E_ALL ^ E_DEPRECATED);
    include_once("connection.php");
    $result = mysql_query("SELECT * FROM players3");
    while($res = mysql_fetch_array($result)) {      
        echo '<img height="80px" width="100px"  src="data:image/jpeg;    base64,'.base64_encode( $res['image'] ).'"/>';

?>

我试过了：

<div class="form-group">
    <label for="telefoon" class="col-sm-2 control-label">Avatar</label>
    <div class="col-sm-10">
        <img height="80px" width="100px" id="avatar" src="data:image/jpeg;base64,'.base64_encode( )"/>
    </div>
</div>
<div class="form-group">
    <label for="telefoon" class="col-sm-2 control-label">Tech ID</label>
    <div class="col-sm-10">
        <input type="text" name="techid" class="form-control" id="techid" placeholder="TechID" >
    </div>
</div>
<div class="form-group">
    <label for="naam" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
        <input type="text" name="name" class="form-control" id="name" placeholder="Name">
    </div>
</div>
<div class="form-group">
    <label for="mail" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
        <input type="text" name="mail" class="form-control" id="mail" placeholder="email">
    </div>
</div>

喜欢这个吗？

 <?php

 error_reporting(E_ALL ^ E_DEPRECATED);
 include_once("connection-db2.php");
 $result = mysql_query("SELECT * FROM TechID");

 while($res = mysql_fetch_array($result)) {     


 echo '<li><img height="80px" width="100px" src="data:image/jpeg;base64,'.base64_encode( $res['image'] ).'"/>';
 }
 ?>

JS

$("#image").attr('src', result[4]);

Answer 1

<img>代码doesn't have value attribute
你可能echo只是想象图片网址并将其设置为src标记的img属性

PHP：

while($res = mysql_fetch_array($result)) { 
    echo $res['image'];
    // ...
}

JS：

$("#avatar").attr('src', result[2]);

在旁注 - 最好是json_encode响应并使用它而不是.split("|")。像这样：

PHP：

$response = array();
while($res = mysql_fetch_array($result)) {
    $response['name'] = $res['name'];
    $response['email'] = $res['email'];
    $response['image'] = $res['image'];
}
echo json_encode($response);

JS：

$.ajax({
    type     : "POST",
    url      : "query2.php",
    data     : data,
    dataType : "json",
    success  : function(result){ 
        $("#name").val(result.name);
        $("#mail").val(result.email);
        $("#avatar").attr('src', result.image);
    }
});

Answer 2

上传图像时，使用图像文件名保存图像路径。比如“images / image1.jpg”
喜欢名称和电子邮件，查询图片的路径。
制作一个空的
在ajax成功之后，您将获得图像的路径。对？像这样使用这条路径。 $（ “＃image_to_show”）的HTML（ “”）;

Ajax自动填充输入字段和图像

2 个答案: