Node.js ajax call and display results with handlebars

问题

I currently have an image and when I click on the image I want to take the url of the image (which is the src) and then get the information associated with that image from my mongodb database. The way I'm trying to do it is to click on the image, get the url, then pass the url back to my routes file -> do a database query to get information and then pass back to page but the information is blank

My ajax call:

     $(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');
    });
});

});

My route file:

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

});

Handlebars view should technically show me the raw data if I write {{images}} but nothing shows up. Any ideas?

In the console:

    success

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

回答1:

You are leaving your data dangling. The data from the ajax call is only available through the success function (it is asynchronous, meaning it returns some time later and the success function gets called with that data when it is available from your server).

So you will need to add logic in that function to trigger your handlebars template with the data returned:

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

You will also need to provide a suitable Handlebars template so you can update your page from the client code. You will need something like this in your html:

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

The data you are getting is in an array, so you will need to use a #each handlebars construct.

来源：https://stackoverflow.com/questions/42395075/node-js-ajax-call-and-display-results-with-handlebars