使用Ajax获取数据并使用纯JavaScript插入HTML

Question

I have fetched data from my php/products.php file using ajax and have a html file that I have already styled. How can I insert the data I have fetched from the products.php file in the html page?

Most of my search results are based on jQuery.

The containers I've used are the containers styled in the css file.

The HTML

<div class="container">
      <header class="header">
         <center>
            <h1>Products</h1>
         </center>
      </header>
      <hr>
      <div id="products" class="products"></div>

      <button id="loadButton" class="btn">Load more</button>
   </div>

The JS

var loadBtn = document.getElementById('loadButton');

loadBtn.addEventListener('click', fetchProducts);

function fetchProducts() {

   var xhr = new XMLHttpRequest;

   xhr.open('GET', `php/products.php?${q}`, true);

   xhr.onload = function () {
      if (this.status == 200) {
         var products = JSON.parse(this.responseText);

         var output, i;

         for (i = 0; i < products.length; i++) {
            output += `
                     <div id="pCard" class="p-card">
                           <p id="pName" class="p-name">${products[i].name}</p>
                           <p id="pAbout" class="p-about">${products[i].description}</p>
                     </div>
                     `;
         }

         console.log(products);

         document.getElementById('products').innerHTML = output;
      }
   }

   xhr.send();
}

The PHP

include 'config.inc.php';

$sqlFetch = "SELECT id,item_name,item_description FROM items ORDER BY id ASC LIMIT 3";

$result = mysqli_query($connection, $sqlFetch);

$products = mysqli_fetch_all($result, MYSQLI_ASSOC);

echo json_encode($products);

I expect the code to parse the containers containing the product name and description to the products container in the HTML page. On clicking the loadBtn I want three more products to be loaded on the webpage Instead am getting an error from the console.

Answer 1

The issue was at the php/products.php?${q} on the JS file.

I was also targeting name and description instead of item_name and item_description .

`
<div id="pCard" class="p-card">
  <p id="pName" class="p-name">${products[i].name}</p>
  <p id="pAbout" class="p-about">${products[i].description}</p>
</div>
`;