我有一个 URL,它执行过滤器并吐出一些结构如下所示的产品:
/Products/Catalogue/tabid/102/andmode/1/Default.aspx?catfilter=185,223
现在这里有一个排序功能,如果我使用它而不像上面那样进行过滤,URL 将如下所示:
/Products/Catalogue.aspx?orderby=price&desc=1&psize=9
如果我当前尝试过滤然后排序,排序会覆盖 myfilter,因此过滤器将变为无效。
所以我需要它做的是知道如果我有一个过滤器然后在 URL 中的“catfilter=”部分之后附加排序,这样 URL 就会看起来像
/Products/Catalogue/tabid/102/andmode/1/Default.aspx?catfilter=8,188&orderby=man&desc=0&psize=36
问题是并不总是会添加一个过滤器,在这种情况下,URL 将是:
/产品/目录.aspx
<select id="listSort" class="NormalTextBox SortCatalogue" onchange="location = this.options[this.selectedIndex].value + '&' + getElementById('listLength')[getElementById('listLength').selectedIndex].value.split('?')[1] + document.getElementById('searchstrdiv').innerHTML.replace('amp;','');">
<option value="?orderby=name&desc=0&">Sort by</option>
<option value="?orderby=price&desc=0">Lowest price</option>
<option value="?orderby=price&desc=1">Highest price</option>
<option value="?orderby=man&desc=0">Brand A-Z</option>
<option value="?orderby=man&desc=1">Brand Z-A</option>
<option value="?orderby=name&desc=0">Title A-Z</option>
<option value="?orderby=name&desc=1">Title Z-A</option>
<option value="?orderby=ref&desc=0">Code asc</option>
<option value="?orderby=ref&desc=1">Code desc</option>
</select>
<span style="text-align:right">Page size</span>
<select id="listLength" class="NormalTextBox PageLength" onchange="location = this.options[this.selectedIndex].value + '&' + getElementById('listSort')[getElementById('listSort').selectedIndex].value.split('?')[1] + document.getElementById('searchstrdiv').innerHTML.replace('amp;','');">
<option value="?psize=9&foo">Page size</option>
<option value="?psize=6">6 per page</option>
<option value="?psize=9">9 per page</option>
<option value="?psize=18">18 per page</option>
<option value="?psize=36">36 per page</option>
</select>
<script type="text/javascript">
var searchString = window.location.search.substring(1);
var i, val;
var params = searchString.replace('?','&').split('&');
var pgsize,pgorder,pdesc,searchstr;
pgsize = 9;
pgorder = 'name';
pdesc = 0;
searchstr='';
for (i=0;i<params.length;i++) {
val = params[i].split('=');
if(val[0]== "psize")
pgsize=val[1];
else if(val[0]== "orderby")
pgorder=val[1];
else if(val[0]== "desc")
pdesc=val[1];
else if((val[0]).toLowerCase()== "search") {
searchstr=val[1];
}
}
document.getElementById('listLength').value='?psize=' + pgsize;
document.getElementById('listSort').value ='?orderby=' + pgorder + '&desc=' + pdesc;
if(searchstr!='') {
searchstr =decodeURIComponent(searchstr.replace(/\+/g, '%20'));
document.getElementById('searchstrdiv').innerHTML= '&search=' + searchstr ;
document.getElementById('searchtxthdrleft').innerHTML= 'Results for "' ;
document.getElementById('searchtxthdrright').innerHTML= '"' ;
document.getElementById('searchtxt').innerHTML = searchstr;
}
</script>
最佳答案
好的,让我们从问题中退一步。我认为您需要添加更多结构,而不是随意添加和删除一些 url 代码:)
您已将帖子标记为 jQuery,所以我将使用它,尽管您实际上并没有在您发布的代码中使用它。
整个想法将围绕creating a JavaScript object and using it as a lightweight dictionary展开。 , 和 the jQuery .param() function它将在最后为我们编码。
让我们将标记更改为:
<select id="listSort" class="NormalTextBox SortCatalogue">
<option value="nameDesc">Sort by</option>
<option value="priceAsc">Lowest price</option>
<option value="priceDesc">Highest price</option>
<option value="manAsc">Brand A-Z</option>
<option value="manDesc">Brand Z-A</option>
<option value="nameAsc">Title A-Z</option>
<option value="nameDesc">Title Z-A</option>
<option value="refAsc">Code asc</option>
<option value="refDesc">Code desc</option>
</select>
<span style="text-align:right">Page size</span>
<select id="listLength" class="NormalTextBox PageLength">
<option value="9">Page size</option>
<option value="6">6 per page</option>
<option value="9">9 per page</option>
<option value="18">18 per page</option>
<option value="36">36 per page</option>
</select>
<input type="text" id="searchstr">
<button id="searchbutton">Search!</button>
正如您将看到的,当您在代码中引用 searchstr
时,我还添加了一个文本框和一个按钮。
我们只是将一些可解析的值存储在选择选项中,而不是编码和提取。我们还将使用一种不显眼的 javascript 技术,通过使用 ID 附加一个 onchange 处理程序,而不是将 javascript 注入(inject)到标记中(这将在稍后添加)。
现在我们需要编写一些可以为我们构建查询字符串的 JavaScript 代码。尽管我们将制作一个 javascript 对象,但我们不会直接构建查询字符串。然后稍后将用于生成查询字符串。
我编写了一个搜索功能,它只显示我们生成的查询字符串而不是重定向用户。
我还添加了一些事件处理程序,因此它会在您的代码触发时触发。
function getFiltersAsQueryString() {
var $listSort = $("#listSort"),
$listLength = $("#listLength"),
$searchQuery = $("#searchstr");
queryStringDict = {};
// extract page size
queryStringDict["psize"] = $listLength.find("option:selected").val();
// extract sort order and direction
var selectedItem = $listSort.find("option:selected").val();
queryStringDict["orderby"] = /^[a-z]*/.exec(selectedItem)[0];
queryStringDict["desc"] = /Desc$/.exec(selectedItem) == "Desc" ? 1 : 0;
// extract search
queryStringDict["search"] = $searchQuery.val();
return $.param(queryStringDict);
}
function searchWithFilters() {
// normally you would do a window.location here to redirect
alert(getFiltersAsQueryString());
}
$(document).ready(function () {
// wire up our handlers
$("#listSort").change(searchWithFilters);
$("#listLength").change(searchWithFilters);
$("#searchbutton").click(searchWithFilters);
});
然后在一天结束时,当您将所有这些放在一起时,您会得到:
我认为这还不是一个完整的解决方案。
- 需要在猫过滤器中添加
- 可能想根据查询字符串预选控件?
我只是想发布这个,看看它是否朝着正确的方向发展。
关于javascript - Jquery 根据 IF 修改 URL?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17806813/