Question

我正在使用AJAX和Handlebars从MongoDB中获取数据，而无需刷新页面并以更简单的方式表示它。

我用搜索按钮创建了一个div，用户在其中放置了他/她的输入。这些输入需要传递到我的路线，然后将来自数据库的结果从我的路线发送回车把，这将帮助我显示产品。

index.hbs

<div id="search-form">
....
                <input id="bhkInput" name="bmin" type="number">
                <input id="priceMin" name="pf" type="number">
                <input id="priceMax" name="pt" type="number">
               <input type="submit" class="btn searchButton" id="submit" value="Search" onclick="showResults()">
</div>

<div class="row col-sm-12 searchResults" id="sr">
//Results need to be displayed here
</div>


<script id = "result-template" type="text/x-handlebars-template">
        {{#each searchResults }}
            <div class="row">
                {{#each this }}
                    <div class="col-sm-6 col-md-4">
                       ...
                            <img src="{{this.imagePath}}" alt="..." class=" card-img-top">
                            <div class="card-body">
                                <h4>Flat No: {{this.flatNo}}</h4>
                                ...
                                <p class="description">
                                    {{this.description}}
                                </p>
                                ...
                                ...
                                </div>
                            </div>
                        </div>
                    </div>
                {{/each}}
            </div>
        {{/each}}
    </script>
<script>
     function showResults(){
        let bmin = document.getElementById('bhkInput').value;
        let pf = document.getElementById('priceMin').value;
        let pt = document.getElementById('priceMax').value;
        $.ajax({
            type: 'GET',
            data: {
                bmin: bmin,
                pf: pf,
                pt: pt
            },
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            url: "/results",
            success: function(data){
                let source = $('#result-template').html();
                let template = Handlebars.compile(source);
                let html = template(data);
                $(".searchResults").innerHTML = html;
            }

        });
}

我面临的问题：

当我从数据库发送回结果时，我无法使用把手显示它。调用成功函数后如何处理数据。我希望将结果附加到“ searchResults” div中。我经历了这个link，但是仍然看不到结果的数据。

更新

我从Handlebars Docs中获取了伪数据，并将其用作模板，但是html中没有附加数据 console.log（html）返回不包含新数据项的模板

index.hbs

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        <h1>{{title}}</h1>
        <div class="body">
            {{body}}
        </div>
    </div>
</script>
<script>
....
 $.ajax({
           ....
            success: function(data){
 var source   = document.getElementById("entry-template").innerHTML;
                var template = Handlebars.compile(source);
                var context = {title: "My New Post", body: "This is my first post!"};
                var html    = template(context);
                console.log(html); 
....
</script>

console.log（html）的输出

  <div class="entry">
        <h1></h1>
        <div class="body">

        </div>
    </div>

Answer 1

第一个问题。您的方法是GET，所以我认为您可以通过req.query.productId来获得它。

第二期。您应该将数据附加到ajax成功回调函数中，因为ajax是异步的。例如：

$.ajax({
       type: 'GET',
       data: encodeURIComponent(searchObject),
       url: "/results",
       success: function(data){
             console.log(data);
             let sr = document.getElementById('sr');
             $(sr).append();
       }
});

How to get "data" from JQuery Ajax requests

在Node.js中使用AJAX并使用车把显示数据

1 个答案: