使用Ajax獲取數據並使用純JavaScript插入HTML

Question

我已經使用Ajax從我的php/products.php文件中獲取了數據，並且有一個已經設置樣式的html文件。 如何在html頁面中插入從products.php文件獲取的數據？

我的大部分搜索結果都基於jQuery。

我使用的容器是css文件中樣式設置的容器。

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>

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

的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);

我希望代碼將包含產品名稱和描述的容器解析為HTML頁面中的產品容器。 在單擊loadBtn我希望在網頁上再加載三個產品，相反從控制台收到錯誤消息。

Answer 1

問題出在JS文件上的php/products.php?${q} 。

我也定位name和description而不是item_name和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>
`;