Ajax自動入力フィールドと画像

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と統合できますか？このよう

<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.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']).'"/>'; 

?> 

は、私はこれを試してみましたか？

<?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

1. 画像ファイル名で画像のパスを保存し、画像をアップロードします。 "images/image1.jpg"のように
2. 名前とメールのように、画像のパスを問い合わせます。
3. 空を作る
4. ajax成功後、画像のパスを取得します。右？このようにこのパスを使用してください。 $（ "＃image_to_show"）。html（ ""）;

Answer 2

<img>タグdoesn't have value attribute
おそらくechoだけで画像のURLとあなたのimgタグのsrc属性として設定する必要があり

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); 
    } 
});