使用 ajax 过滤结果并修改 URL答案

【问题标题】：Filter results with ajax and modify URL使用 ajax 过滤结果并修改 URL
【发布时间】：2015-06-05 08:30:05
【问题描述】：

我正在尝试为我目前在 Laravel 中构建的网站构建过滤器功能，这将使客户能够按产品的属性对其进行过滤。

目前，过滤产品的 URL 是/filter?size=1,2,3&construction=102,204&brand=4,37。

我希望能够根据选择的过滤器更改 URL 并刷新结果而不重新加载页面。

我想要实现的一个例子是 AO.com 的过滤：http://ao.com/l/washing_machines-free_standing/1-9/1/#!/washing_machines-bosch-free_standing-priced_350_to_450-7kgandmore/1-6-9-23-39/1/

我在互联网上搜索了很多，试图找到最好的方法，但我似乎找不到一个确定的方法。

如果有人能指出我正确的方向，那就太好了。

【问题讨论】：

标签： jquery ajax laravel filter

【解决方案1】：

AO 过滤器的一个示例是选择选项，例如：最受欢迎。

使用 Jquery/AJAX 可以过滤：

$('select[name="yourSelectCategory"]').change(function(){
   var selected = $(this).val();
   $.ajax({
       type: "post",
       url: "yourPostRoute",
       data: {userSelected: selected},
       //You can also add dataType: "json" if you want to return json data
       // and cache: false,
       success: function(html){
       //Use the data

      $('.filterResultContainer').load('/yourDataResultView');
}
});
});

控制器：

$data = Input::get('userSelected');
//Query the DB where category = $data or category like $data
//Pass the result data to yourDataResultView.

【讨论】：

感谢您的回复，米歇尔。我注意到 AO 在他们的 URL 中有一个 hashbang，这如何适合您的答案？
hashbang 被添加到 URL。您可以决定在调用 ajax 方法之前或结果之后添加。而且我认为它是加密/散列的，因此这将取决于您可能决定使用的散列方法