dongpai6552 2019-07-06 17:52
浏览 183
已采纳

使用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>
    `;
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 delta降尺度计算的一些细节,有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突
  • ¥15 超声波模块测距控制点灯,灯的闪烁很不稳定,经过调试发现测的距离偏大
  • ¥15 import arcpy出现importing _arcgisscripting 找不到相关程序