Using AJAX in Node js and displaying data using Ha

问题:

I am using AJAX and Handlebars to get data from my MongoDB without refreshing the page and represent it in an easier manner.

I have created a div with a search button where a user places his/her inputs. These inputs need to passed to my routes and then the results from my DB should be sent back from my routes, to the handlebar which will help me display the products.

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

        });
}

The issue that I am facing:

When I send back the results from my DB, I am unable to display it using Handlebars. How do I handle the data after success function is called. I want the results to be appended in the 'searchResults' div. I went through this link, however I am yet not able to see the data of my results.

Update

I took dummy data from the Handlebars Docs and used it for my template and yet there is no data being appended in the html The console.log(html) returns the template without the new data items

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>

Output for console.log(html)

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

        </div>
    </div>

回答1:

For the first issue. Your method is GET so I think you can get it by req.query.productId.

For the second issue. You should append your data in ajax success callback function, because ajax is asynchronous. For example:

$.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