AJAX filtering of the catalog with goods. How to insert a response into a page?

Question

JavaScript

As we already know, a product can have properties such as: price, color, manufacturer, and the like. AJax request is sent by choice selecta is able to. I am familiar with ajax requests. But it is not possible to correctly insert the received answer into the page. And in general, when I look at the answer in the Network tab in the Google Chrome developer console, the whole page comes in response, that is, its entire html code. I understand that it can be returned in JSON format, but as I said, the problem for me is to insert the response into the page.

Answer 1

Check on the server side whether a normal or XMLHTTPRequest request has arrived. If an XMLHTTPRequest request comes in, then don't return the entire page, but only what you need to replace. How to insert the answer on the page I think it is not necessary to explain?

Answer 2

Either manually create html markup from the JSON response, or you can use template engines like handlebars.js . Search keywords for "javascript template engine".

Answer 3

Quickly found a video:
YouTube
Try it.
From myself I’ll say that I would rather receive data in json format and through each I would collect a list for display
Logic:
We got json of the form -

{
   "a":{
     "price":1000,
     "size":10
   },
   "b":{
     "price":1000,
     "size":10
   },
   "c":{
     "price":1000,
     "size":10
   }
}

Next, through each (jquery) we substitute into a pre-prepared template (if the template is not large, then you can do without it):

$(".list-items").html('');
$.each(json, function(i, data){
     $(".list-items").append("<li><span class='price'>" + data.price + "</span><span class='size'>" + data.size + "</span></li>");
})

This is a logical example, I can describe in more detail, if not in a hurry