如何使頁面使用php，ajax，jquery和下拉菜單以正確的順序顯示產品

Question

我正在嘗試制作一個下拉菜單，您可以從中對頁面進行排序：“價格高-低”或“價格低-高”。

這是帶有id =“ show_product”的HTML

<div class="row" id ="notification-bar"></div>
<div class="row" id="show_product">Here comes the table with products</div>

這是下拉菜單的HTML：

<select name="sort" id="sort">
    <option value="asc">Price low - high</option>
    <option value="desc">Price high - low</option>
</select>

這個的jQuery是：

$(document).ready(function(){
    $('#sort').change(function() {      
        var sort = $(this).val();               
        $.ajax({
            url:"load_products.php",
            method:"POST",
            data: {sort:sort},
            succes:function(data){
                $('#notification-bar').text('The page has been successfully loaded');
                $('#show_product').html(data);
           },
           error: function() {
               $('#notification-bar').text('An error occurred');
           }
        });     
    });
});

最后，load_products.php是：

<?php
include("inc/connect.php");

$output = '';

if($_POST["sort"] != '') {
    $query = "SELECT * FROM shop ORDER BY price " . $_POST["sort"];
    $result   = mysqli_query($con, $query);
    while($row = mysqli_fetch_array($result)) {
        $output .= '<div class="col-lg-4 col-md-6">';
        $output .= '<div class="single-product">';
        $output .= '<img class="img-fluid" src="' . $row["imageURL"] . '">';
        $output .= '<div class="product-details">';
        $output .= '<h6 class="text-center">' . $row["title"] . '</h6>';
        $output .= '<div class="price text-center">';
        $output .= '<h6>&euro; ' . $row["price"] . '</h6>';
        $output .= '</div>';
        $output .= '</div>';
        $output .= '</div>';
        $output .= '</div>';
    }   
    return $output;
} else {
    $query  = "SELECT * FROM shop ORDER BY price ASC";
    $result = mysqli_query($con, $query);
    while($row = mysqli_fetch_array($result)) {
        $output .= '<div class="col-lg-4 col-md-6">';
        $output .= '<div class="single-product">';
        $output .= '<img class="img-fluid" src="' . $row["imageURL"] . '">';
        $output .= '<div class="product-details">';
        $output .= '<h6 class="text-center">' . $row["title"] . '</h6>';
        $output .= '<div class="price text-center">';
        $output .= '<h6>&euro; ' . $row["price"] . '</h6>';
        $output .= '</div>';
        $output .= '</div>';
        $output .= '</div>';
        $output .= '</div>';
    }   
    return $output;         
}   
?>

問題是，當我從下拉列表中更改選項時，ID“ show_product”未填充load_products.php中的數據。

知道發生了什么事嗎？

親切的問候，

阿里

Answer 1

好吧，我看不到您的表單方法，但希望您檢查是否有一些小東西，例如設置為POST。 如果您不使用OOP方式嘗試清除輸入，也可以。 在PHP.ini中啟用顯示錯誤，因為如果在代碼運行時向我們展示了確切的效果顯示，這也對我們有幫助。