jQuery ajax过滤表单和URL哈希

时间:2013-02-12 11:23:28

标签: jquery ajax

我有以下代码:

<label class='checkbox'><input type='checkbox'  class='custom_filter' name='kleuren' value='Blauw' data-taxonomy='kleuren' data-category='Blauw'>  Blauw (4) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='kleuren' value='Rood' data-taxonomy='kleuren' data-category='Rood'>  Rood (2) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='kleuren' value='Wit' data-taxonomy='kleuren' data-category='Wit'>  Wit (2) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='kleuren' value='Zwart' data-taxonomy='kleuren' data-category='Zwart'>  Zwart (1) </label> 
<label>provincies</label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Drenthe' data-taxonomy='provincies' data-category='Drenthe'>  Drenthe (6) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Flevoland' data-taxonomy='provincies' data-category='Flevoland'>  Flevoland (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Friesland' data-taxonomy='provincies' data-category='Friesland'>  Friesland (6) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Groningen' data-taxonomy='provincies' data-category='Groningen'>  Groningen (5) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Limburg' data-taxonomy='provincies' data-category='Limburg'>  Limburg (2) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Noord-Brabant' data-taxonomy='provincies' data-category='Noord-Brabant'>  Noord-Brabant (2) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Noord-Holland' data-taxonomy='provincies' data-category='Noord-Holland'>  Noord-Holland (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Overijssel' data-taxonomy='provincies' data-category='Overijssel'>  Overijssel (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Utrecht' data-taxonomy='provincies' data-category='Utrecht'>  Utrecht (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Zeeland' data-taxonomy='provincies' data-category='Zeeland'>  Zeeland (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='provincies' value='Zuid-Holland' data-taxonomy='provincies' data-category='Zuid-Holland'>  Zuid-Holland (0) </label> 
<label>stijlen</label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Amerikaans' data-taxonomy='stijlen' data-category='Amerikaans'>  Amerikaans (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Cabriolet' data-taxonomy='stijlen' data-category='Cabriolet'>  Cabriolet (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Duits' data-taxonomy='stijlen' data-category='Duits'>  Duits (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Engels' data-taxonomy='stijlen' data-category='Engels'>  Engels (8) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Frans' data-taxonomy='stijlen' data-category='Frans'>  Frans (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Italiaans' data-taxonomy='stijlen' data-category='Italiaans'>  Italiaans (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Klassiek' data-taxonomy='stijlen' data-category='Klassiek'>  Klassiek (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Luxe' data-taxonomy='stijlen' data-category='Luxe'>  Luxe (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='stijlen' value='Modern' data-taxonomy='stijlen' data-category='Modern'>  Modern (0) </label> 
<label>merken</label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='merken' value='Austin' data-taxonomy='merken' data-category='Austin'>  Austin (7) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='merken' value='Bentley' data-taxonomy='merken' data-category='Bentley'>  Bentley (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='merken' value='BMW' data-taxonomy='merken' data-category='BMW'>  BMW (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='merken' value='Cadillac' data-taxonomy='merken' data-category='Cadillac'>  Cadillac (1) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='merken' value='Chevrolet' data-taxonomy='merken' data-category='Chevrolet'>  Chevrolet (0) </label> 
<label class='checkbox'><input type='checkbox'  class='custom_filter' name='merken' value='Chrysler' data-taxonomy='merken' data-category='Chrysler'>  Chrysler (0) </label> 


这表示用于将筛选器应用于数据库查询的表单。单击每个过滤器(设置复选框)后,必须刷新URL HASH,如下所示:

     #provincies=Drehte,Noord-Brabant&kleuren=Wit,Rood

如果选中了所选的优惠和颜色,那么这就是一个例子。

我试过

     var filters = jQuery("#CUSTOM_AJAX_FILTERS").serializeArray();

其中filters var将从表单获取所有数据,如数组,但它始终返回一个空数组。此外,我尝试获取数据分类和数据类别(Where Taxonomy = category;&amp; category = filter)并使用window.location.hash获取url哈希并拆分所有内容,附加新数据或删除等但那不是一个好选择。
如果有任何其他解决方案可以使用ajax /而不刷新页面轻松地使用选中的复选框建立url哈希,请告诉我。

谢谢!

1 个答案:

答案 0 :(得分:1)

尝试jquery mapjoin

var CUSTOM_AJAX_FILTERS = $("input:checkbox:checked.custom_filter").map(function(){
    return $(this).val();
}).get().join(",");