在 Node js 中使用 AJAX 并使用 Handlebars 显示数据

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

        });
}

我面临的问题：

当我从数据库发回结果时，我无法使用 Handlebars 显示它。 调用成功函数后如何处理数据。我希望将结果附加到“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