Question

JS，京东上的和淘宝上的条件筛选功能是怎么做的，如果知道能简单说下实现原理吗？

我看到按一下条件后会发送一个参数到服务器，然后刷新网页，刷新网页后该条件被选中，因为刷新网页会导致js重新运行，怎样保存那个条件状态被选中？

Answer 1

您好：说一下我们自己商城的实现方式，最初我们用的都是服务器控件。首先先把所有的筛选条件加载到页面上，在用户点击的时候因为都是服务器控件，所以每次都会回发，我们给每个控件都有一个唯一的ID标识，这样每次点击后，把查询条件拼接到sql中查询出数据后，把当前点击的筛选条件存到ViewState中，然后页面刷新后去读取这个ViewState的值。也就是你页面上有几类筛选条件就需要几个ViewState值来存储。
后来因为数据从后台回发到前台，百度抓取的时候是抓不到的，不利于商城的SEO优化。最后决定把所有的筛选条件都拼接到URL中进行传值。这也是大多数网站采用的方式。就是举个例子：查询学生信息，筛选条件类型有，身高，体重，年龄。那么筛选条件都有a标签，连接是这样<a href='http://www.student.com/studentlist.html?age=18'></a>这样。点身高的时候先把连接中加上身高的的条件然后刷新页面。这样在后台直接request获取值，然后查询数据库即可。为此我们也自己写了一个根据传入的筛选条件来返回不同url的实体类方法。很简单。京东淘宝筛选也是刷新页面的。
查询完后，也是根据url中的值来锁定哪个筛选条件来显示选中状态。

追问

查询完后，也是根据url中的值来锁定哪个筛选条件来显示选中状态。

这句话是不是就是js获取地址栏上的url，然后获取值来锁定哪个筛选条件来显示选中状态啊？

追答

您想，在哪里可以获取url值？当然后台也可以，前台js也可以了。前后都可以的。在后台比较好。如果筛选条件多的话，加载慢，可能会出现页面刚出来都没选中，可能一会又选中了。可能有这么个延迟。这是如果筛选条件多的话。不过应该问题不大。上百个筛选条件，用js也是可以的。不要小看js效率。建议你用js就可以。
记得关键的一步就是：在页面第一次加载的时候，每个筛选条件中的a标签的href属性，其实都是已经赋值好的了。点击时候只是刷新页面而已。所以这就需要写个返回当前筛选条件url的方法，在页面加载的时候去调用。比如第一个筛选条件身高18身高20

你可以打开京东筛选条件页面，不要点筛选条件，只用鼠标指向他，浏览器底部会显示a标签上的url信息。是在页面加载完，每个筛选条件都已经拼接好了。

Answer 2

通过ajax无刷重新加载，不是刷新网页。

追问

我也知道这种方法可以实现，可我看到页面确实被刷新了

追答

那应该是JS将筛选数据同步传给后台脚本，并按接收到的筛选脚本重新返回结果的。

并没有采用Ajax方式。

而通过GET方法，以URL来传递筛选参数的。

看下图示：

这是京东手机商品页

我增加一个搜索条件，300-599元，如图，看URL变化