Node.jsハンドルバーでajaxを呼び出すと結果が表示されます

Question

私は現在画像を持っています。画像をクリックすると画像のURL（srcです）を取得し、その画像に関連する情報を取得します私のmongodbデータベース。私がそれをやろうとしているのは、イメージをクリックしてURLを取得してから、私のルートファイルにURLを戻します。>情報を取得するためにデータベースクエリを実行してから、ページに戻って情報が空白になります。

私のAJAX呼び出し：

 $(function() { 
$(".image_selection").click(function() { 

    var idimg = $(this).attr('id'); 

    var data = {}; 
     data.img = idimg; 
     var source, template; 
       $.ajax({ 
        type: 'GET', 
        data: encodeURIComponent(idimg), 

         url: 'http://localhost:3001/new', 
         success: function(data) { 
          console.log('success'); 
          console.log(data); 

         } 
        }); 


    $("#load_art").css({"visibility":"visible"}); 
    //$("#load_art").html({data}); 

    $(".image_selection1").attr('src',idimg); 
    $('html,body').animate({ 
     scrollTop: $("#load_art").offset().top}, 
     'slow'); 
    }); 
}); 

}）;

マイルートファイル：私は{{画像}}書く場合

app.get('/new', function(req, res){ 
    var obj = {}; 
    var img = req.body.img; 
    Images.find({'url':img}).limit(1).exec(function(err, docs){ 
     res.send({images:docs}); 
    }); 

}); 

ハンドルバービューは、技術的には私の生のデータを表示する必要がありますが、何も現れません。何か案は？コンソールで

：

success 

Array[1] 
0:Object 
width: bla bla, 
height: bla bla, 
etc for each object element returned from database 

Answer 1

あなたはあなたのデータのダングリングを残しています。 ajax呼び出しのデータは、success関数を介してのみ使用できます（非同期です。つまり、後で時間を返し、成功関数がサーバーから使用可能になった時点でその関数で呼び出されます）。データが返されると

つまり、あなたのハンドルバーのテンプレートをトリガするために、その関数のロジックを追加する必要があります：あなたは、クライアントからのあなたのページを更新できるように

$(function() { 
    $(".image_selection").click(function() { 
    var idimg = $(this).attr('id'); 
    $.ajax({ 
     type: 'GET', 
     data: encodeURIComponent(idimg), 
     url: 'http://localhost:3001/new', 
     success: function (data) { 
     console.log(data); 
     var source = $("#image-template").html(); 
     var template = Handlebars.compile(source); 
     var html = template(data); 
     // you will now have some html that you will need to insert into your page 
     $(".someplace").innerHTML = html; 
     } 
    }); 
    }); 
}); 

あなたはまた、適切なハンドルバーのテンプレートを提供する必要がありますコード。あなたが取得しているデータが配列であるので、あなたは#eachハンドルバーを構築使用する必要があります

<script id="image-template" type="text/x-handlebars-template"> 
    {{#each items}} 
    {{width}},{{height}} 
    {{/each}} 
</script> 

：あなたは、あなたのhtmlでこのような何かが必要になります。