是否有一种更智能，更重要的功能方式来显示我商店中数据库中的产品，以便以后进行分类？

如何解决是否有一种更智能，更重要的功能方式来显示我商店中数据库中的产品，以便以后进行分类？

我知道回显html代码是不好的做法，但是我是一个初学者，所以我没有找到更合适的方法。另外，我可以通过让用户更改sql查询来对项目进行排序，这很容易（是的，这也使我容易受sql injections的影响），但我愿意接受全新的建议或您知道的教程。我的目标是在我的网站上的数据库中显示所有43个项目，并让用户对其进行排序。如果需要的话，我也会参与javascript。

编辑-我正在使用本地xampp server。

<? PHP
    foreach($json as $row) {
        echo '<div class="col-lg-4">
                < div class="trainer-item" >
                    <div class="image-thumb" >
                        <img src = "assets/images/product-6-720x480.jpg" alt = "" >
                    </div >
                    <div class="down-content" >
                        <span >
                            <sup > $ </sup > '($row[' ProductPrice ']); '
                        </span >

                        <h4 > '.($row[' ProductName ']).' </h4 >
    
                        <p > Product description</p >
    
                        <ul class="social-icons" >
                            <li ><a href = "product-details.html" > +Order </a ></li >
                        </ul >
                    </div >
                </div >
            </div > ';

解决方法

您可以编写一个REST api从数据库返回JSON项并在UI中异步调用它：

fetch(`http://RestApiUrl`)
        .then(function (response) {
            const json = response.json();
            for (row in json) {
                var div = document.createElement("div");
                div.setAttribute("class","col-lg-4");

                var trainerItem = document.createElement("div");
                trainerItem.setAttribute("class","trainer-item");

                var imageThumb = document.createElement("div");
                imageThumb.setAttribute("class","image-thumb");

                var img = document.createElement("img");
                img.setAttribute("src","assets/images/product-6-720x480.jpg");
                imageThumb.appendChild(img);

                var downContent = document.createElement("div");
                downContent.setAttribute("class","down-content");

                var price = document.createElement("span");
                price.innerHTML  = `<sup>$</sup>${row.ProductPrice}`

                var name = document.createElement("h4");
                name.innerHTML  = row.ProductName
                downContent.appendChild(price);
                downContent.appendChild(name);

                trainerItem.appendChild(imageThumb);
                trainerItem.appendChild(downContent);

                div.appendChild(trainerItem);
            }
            /*Set the items to main div*/
            document.getElementById('main').innerHTML  = div;
        })

<div id="main" class="row"></div>