如何使用php、ajax、jquery和下拉菜单使页面按正确的顺序显示产品

Question

我正在尝试做一个下拉菜单，你可以从一个页面排序“价格高-低”或“价格低-高”。

这是带有id="show_product“的超文本标记语言

<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中显示错误，因为如果您向我们显示了代码运行时的确切效果，这也会对我们有所帮助。