更新php生成的内容而不刷新页面

Question

我创建了一个php函数（在“ category-page.php”中称为“ category_page”），该函数将文件中的数据读取到关联数组中，然后生成一些html，以显示有关products.php的信息（该页面称为“ category_page”功能）

我的目的是允许用户从下拉列表中进行选择，以便对显示的信息进行排序，而无需刷新页面。

到目前为止，我已经设法通过更改下拉列表时使用document.formname.submit来实现此目的，然后使用$_GET选择要对数组进行排序的键，但是，这会导致页面重新加载。

我对php，javascript / jquery有一点了解，并且在AJAX上进行了一些搜索/阅读，以实现无需刷新/重新加载就可以进行更新的功能，但似乎无法将所有内容组合在一起。

因此，在products.php中，我具有以下javascript / jquery：

function sort_products() {
queryString = "?sort_list="+$("#sort_list").val();
$.ajax({   
    type: 'GET',                                   
    url: 'category-page.php',         
    data: 'sort_list='+queryString
})
}

$("#sort_list").on("change", function() { sort_products() });

然后在category-page.php中：

if(isset($_GET['sort_list'])) {
    $sort = $_GET['sort_list'];
} 
else {
    // set default sort order
} 

我已经在Chrome的网络面板中验证了是否正在发送对category-page.php?sort_list=price的请求，但该页面没有更新。 任何帮助，将不胜感激！

Answer 1

更改以下代码行：

$("#sort_list").on("change", function(e) { sort_products(); e.preventDefault(); e.stopPropagation(); });

Answer 2

发送查询后，您需要对返回的内容进行处理。

$.ajax({   
    type: 'GET',                                   
    url: 'category-page.php',         
    data: 'sort_list='+queryString
})
.done(function(data) {
    // if your php code returns the html you can make something like this
    // the var data will be the html code
    $('#your-container').html(data)
})