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)
})

更新php生成的内容，无需刷新页面

2 个答案: