使用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.
答
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>
`;