Я делаю сайт для личного проекта, и я застрял. У меня есть страница со списком продуктов, и у каждого есть своя кнопка, при нажатии на которую она должна перейти на другую страницу, где пользователь может прочитать больше информации о продукте. Эта вторая страница исправлена для всех продуктов с одинаковым макетом. Так, как я могу заставить каждую кнопку отправить на эту страницу и сказать ему загрузить информацию для указанного продукта? например, представьте себе Amazon, у вас есть список продуктов, и когда вы нажимаете на один из них, вы снова отправляетесь на страницу продукта, чтобы прочитать всю информацию о нем; и все продукты имеют одну и ту же страницу, только информация об указанном вами продукте изменяется. вот html:
<!DOCTYPE HTML>
<html>
<head>
<?php
include ("top.php");
include ("common.php");
include ("projects/get_projects.php");
?>
<link href="style/explore.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/script4.js"></script>
</head>
<body>
<?php include ("nav.php");?>
<div id = "container"></div>
</body>
</html>
вот что я сделал в js (я загружаю данные с помощью ajax)
const data = [{
"username": "User1",
"title": "Applicazione android per gestire le lezioni",
"descr": "Mi serve una semplice app android per gestire dei corsi universitari. Per maggiori informazioni mandatemi un messaggio",
"budget": "250\u20ac - 750\u20ac",
"category": "app",
"data": "2020-02-25",
"flag": "Non disponibile"
},
{
"username": "User2",
"title": "Software per gestire i pagamenti in cassa",
"descr": "Mi serve un software da installare all'interno dei computer alla cassa di un supermercato per poter gestire i pagamanti. \r\nDeve offrire la possibilit\u00e0 di cancellare un prodotto, inserirne uno manualmente, consentire il pagamento in contanti o col pos, etc.",
"budget": "1500\u20ac - 3000\u20ac",
"category": "software",
"data": "2020-04-16",
"flag": "Disponibile"
},
{
"username": "User3",
"title": "Configurazione rete aziendale",
"descr": "Mi serve un esperto in sistemi per installare una rete aziendale protetta.",
"budget": "+ 5000\u20ac",
"category": "sistemi",
"data": "2020-04-16",
"flag": "Disponibile"
},
{
"username": "User14",
"title": "sito web per impresa di costruzioni edili",
"descr": "Mi serve un semplice sito su cui pubblicare tutte le foto dei miei lavori e permetterei ai clienti di contattarmi facilmente via email.",
"budget": "250\u20ac - 750\u20ac",
"category": "web",
"data": "2020-03-25",
"flag": "Disponibile"
},
{
"username": "User5",
"title": "Database per azienda di catering",
"descr": "Mi servirebbe un database per gestire un'azienda di catering.\r\nAll'interno andrebbero inseriti dati di ricette, men\u00f9, cuochi, eventi, personale, etc.\r\nBisogna inoltre dotarlo di tutte le funzioni per aggiungere o aggiornare tale elenco",
"budget": "250\u20ac - 750\u20ac",
"category": "database",
"data": "2020-04-16",
"flag": "Disponibile"
},
{
"username": "User6",
"title": "Mi serve un esperto per fare un video musicale",
"descr": "Sto per far uscire il mio nuovo pezzo musicale e devo realizzare il video della canzone per poterla postare su YouTube.\r\nMi serve quindi un esperto che sappia montare un video in modo professionale.",
"budget": "3000\u20ac - 5000\u20ac",
"category": "altro",
"data": "2020-04-16",
"flag": "Disponibile"
}
]
function showInfo(data) {
var htmlString = "";
var containerPrj = document.getElementById("container");
if (data.length == 0) {
htmlString = "<span id = " + "message>" + "Non è stato trovato alcun progetto" + "</span>";
containerPrj.insertAdjacentHTML('beforeend', htmlString);
} else {
for (i = 0; i < data.length; i++) {
htmlString = "<div class = " + "project>" +
"<span>" + data[i].username + "</span>" +
data[i].title + " | " +
data[i].category + " | " +
data[i].budget + " | " +
data[i].data + " | " +
data[i].flag + " | " +
"<button id =" + "details>" + "Dettagli" + "</button>" +
//each of this button must link to a page where i can see more information about this specified button that represent 1 specified product
'</div>';
containerPrj.insertAdjacentHTML('beforeend', htmlString);
}
}
}
showInfo(data)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>