dongpai6552
2019-07-06 17:52
浏览 181

使用ajax获取数据并使用普通javascript插入html

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.

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dqwd71332 2019-07-06 18:35
    已采纳

    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>
    `;
    
    已采纳该答案
    打赏 评论

相关推荐 更多相似问题