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

});

如果我写 {{images}}，Handlebars 视图应该会向我显示原始数据，但没有显示。有什么想法吗？

在控制台中：

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

您还需要提供合适的 Handlebars 模板，以便您可以从客户端代码更新您的页面。您的 html 中将需要这样的内容：

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

您获取的数据位于数组中，因此您需要使用 #each 车把结构。