使用ajax从数据库中获取数据并放入javascript数组

Question

我没有从数据库获得任何数据到javascript但我得到数据到PHP

我使用Ajax从数据库中获取数据，从PHP文件中获取数据到javascript，我想使用javascript过滤数据，所以我使用javascript获取数据来显示产品，我没有将数据获取到javascript，而是将数据获取到PHP文件。

$.ajax({
url: 'user.php',
type: 'GET',
datatype: 'json',
success: function (data) {
}
});

function ajax() {
const xhr = new XMLHttpRequest;
xhr.open('GET', 'user.php', true);
xhr.send();
xhr.onload = () => {
if (this.readyState == 4 && this.status == 200) {
let products = JSON.parse(this.responseText);
console.log(products);
}
}
}
const section = document.querySelector('.cards');
const btnContainer = document.querySelector('.top ul');

window.addEventListener('DOMContentLoaded', () => {
displayProductItems(products);
displayMenuButtons();
});
function displayProductItems(productItems) {
let displayProducts = productItems.map((item) => {
return `<div class="card">
<img src="${item.image}" alt="">
<h3>${item.title}</h3>
<div class="bottom">
<span class="text-accent-2">${item.category}</span>
<span class="price">$${item.price}</span>
</div>
</div>`;
});
displayProducts = displayProducts.join("");
section.innerHTML = displayProducts;
}
function displayMenuButtons() {
const sub_categories = products.reduce((values, item) => {
if (!values.includes(item.sub_category)) {
values.push(item.sub_category);
}
return values;
}, ['all']);
const buttons = sub_categories.map((sub_cat) => {
return `<li><button class="filter-btn" data-id="${sub_cat}">${sub_cat}</button></li>`
}).join("");
btnContainer.innerHTML = buttons;
const filterBtn = document.querySelectorAll('.filter-btn');
filterBtn.forEach((btn) => {
btn.addEventListener('click', (e) => {
const sub_cat = e.currentTarget.dataset.id;
const productsSubCat = products.filter((productItem) => {
if (productItem.sub_category === sub_cat) {
return productItem;
};
});
if (sub_cat === 'all') {
displayProductItems(products);
} else {
displayProductItems(productsSubCat);
}
});
});
}

Answer 1

试试这个代码

let products = [];
$.ajax({
url: 'user.php',
type: 'GET',
datatype: 'json',
success: function (data) {
products = JSON.parse(data);
displayProductItems(products);
displayMenuButtons();
}
});
function ajax() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'user.php', true);
xhr.send();
xhr.onload = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
let products = JSON.parse(xhr.responseText);
console.log(products);
}
}
}
const section = document.querySelector('.cards');
const btnContainer = document.querySelector('.top ul');
function displayProductItems(productItems) {
let displayProducts = productItems.map((item) => {
return `<div class="card">
<img src="${item.image}" alt="">
<h3>${item.title}</h3>
<div class="bottom">
<span class="text-accent-2">${item.category}</span>
<span class="price">$${item.price}</span>
</div>
</div>`;
}).join("");
section.innerHTML = displayProducts;
}
function displayMenuButtons() {
const sub_categories = products.reduce((values, item) => {
if (!values.includes(item.sub_category)) {
values.push(item.sub_category);
}
return values;
}, ['all']);
const buttons = sub_categories.map((sub_cat) => {
return `<li><button class="filter-btn" data-id="${sub_cat}">${sub_cat}</button></li>`
}).join("");
btnContainer.innerHTML = buttons;
const filterBtn = document.querySelectorAll('.filter-btn');
filterBtn.forEach((btn) => {
btn.addEventListener('click', (e) => {
const sub_cat = e.currentTarget.dataset.id;
const productsSubCat = products.filter((productItem) => productItem.sub_category === sub_cat);
if (sub_cat === 'all') {
displayProductItems(products);
} else {
displayProductItems(productsSubCat);
}
});
});
}

我希望它能奏效!