Node.js Ajax调用并通过把手显示结果 [英] Node.js ajax call and display results with handlebars

问题描述

我当前有一个图像，当我单击图像时，我要获取图像的url(即src)，然后从mongodb数据库中获取与该图像相关的信息.我尝试执行的方法是单击图像，获取url，然后将url传递回我的路由文件->执行数据库查询以获取信息，然后传递回页面，但信息为空白

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

我的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视图应该向我显示原始数据，但是什么也没有显示.有什么想法吗?

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

在控制台中:

    success

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

推荐答案

您正在悬空数据.来自ajax调用的数据仅可通过success函数获得(它是异步的，这意味着它会在一段时间后返回，并且当从服务器上获得该数据时，将使用该数据调用成功函数).

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

您还需要提供合适的Handlebars模板，以便您可以从客户端代码更新页面.您将在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>

您获取的数据在一个数组中，因此您将需要使用#each把手构造.

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

这篇关于Node.js Ajax调用并通过把手显示结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！