//script.js
<a href = "./details.html?id=${element.id}" class="details"><i class="fa-solid fa-circle-info"></i></a>
如何使用 fetch api 访问详细信息部分？
详细信息.js
//db.json
"products": [
{
"id": 1,
"image": "/assets/images/product-01.jpg.webp",
"description": "Converse All Star Hi Plimsolls",
"price": "74$",
"category": "Women"
}]
如何使用 fetch api 访问详细信息部分？ 详细信息.js 详细信息.html
enter code here
let id = new URLSearchParams(window.location.search).get('id')
let details = document.querySelector(".details")
fetch(`http://localhost:3000/products/${id}`)
.then((response) => response.json())
.then((data) => {
details.innerHTML = `
<div class="product-image"><img src="${data.image}" alt=""></div>
<p>${data.description}</p>
<h5>${data.price}</h5>
<h5>${data.category}</h5>
`
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="assets/scss/details.css">
</head>
<body>
<div class="details"></div>
</section>
<script src="assets/js/details.js"></script>
</body>
</html>