Javascript Jquery根据IF修改URL?
我有一个URL,它可以进行过滤并输出一些产品,其结构如下所示:Javascript Jquery根据IF修改URL?,javascript,jquery,Javascript,Jquery,我有一个URL,它可以进行过滤并输出一些产品,其结构如下所示: /Products/Catalogue/tabid/102/andmode/1/Default.aspx?catfilter=185,223 现在,这里有一个排序函数,如果我使用这个函数时不进行上述过滤,URL将如下所示: /Products/Catalogue.aspx?orderby=price&desc=1&psize=9 如果我当前尝试过滤然后排序,排序将覆盖myfilter,因此过滤器将变为null和v
/Products/Catalogue/tabid/102/andmode/1/Default.aspx?catfilter=185,223
现在,这里有一个排序函数,如果我使用这个函数时不进行上述过滤,URL将如下所示:
/Products/Catalogue.aspx?orderby=price&desc=1&psize=9
如果我当前尝试过滤然后排序,排序将覆盖myfilter,因此过滤器将变为null和void
因此,我需要它做的是注意,如果我有一个过滤器,然后在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>
排序
最低价格
最高价格
品牌A-Z
品牌Z-A
标题A-Z
标题Z-A
代码asc
代码描述
页面大小
页面大小
每页6张
每页9张
每页18个
每页36
var searchString=window.location.search.substring(1);
varⅠ,val;
var params=searchString.replace('?','&').split('&');
变量pgsize、pgorder、pdesc、searchstr;
pgsize=9;
pgorder='name';
pdesc=0;
searchstr='';
对于(i=0;iOk,让我们从这个问题后退一步。我认为您需要添加更多的结构,而不是随意添加和删除url代码:)
您已经将帖子标记为jQuery,因此我将使用它,尽管您在发布的代码中没有实际使用它
整个想法都会出现,最终会为我们编码
让我们将标记更改为:
<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>
然后在一天结束时,当你把所有这些放在一起,你会得到:
我认为这还不是一个完整的解决方案
需要添加cat滤清器
可能要根据查询字符串预选控件
我只是想发布这篇文章,看看它是否朝着正确的方向发展。非常有帮助,谢谢你,最后在一些JS和Jquery中提出了完整的解决方案:
<script type="text/javascript">
var searchString = window.location.search.substring(1);
var i, val;
var params = searchString.replace('?','&').split('&');
var pgsize,pgorder,pdesc,searchstr,catfilter;
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]== "catfilter")
catfilter=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;
}
if(catfilter)
{
document.getElementById('searchstrdiv').innerHTML= document.getElementById('searchstrdiv').innerHTML + '&catfilter=' + catfilter ;
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.SortCatalogue').removeAttr('onchange');
$('.SortCatalogue').change(function() {newURL();});
$('.PageLength').removeAttr('onchange');
$('.PageLength').change(function() {newURL();});
function newURL()
{
var newParams = document.getElementById('listSort') [document.getElementById('listSort').selectedIndex].value + '&' + document.getElementById('listLength') [document.getElementById('listLength').selectedIndex].value.split('?')[1] + document.getElementById('searchstrdiv').innerHTML.replace('amp;','');
var oldPathname = location.pathname;
oldPathname = oldPathname.replace('/desc/','/').replace('/orderby/', '/');
document.location.href = oldPathname + newParams;
}
});
</script>
var searchString=window.location.search.substring(1);
varⅠ,val;
var params=searchString.replace('?','&').split('&');
变量pgsize、pgorder、pdesc、searchstr、catfilter;
pgsize=9;
pgorder='name';
pdesc=0;
searchstr='';
for(i=0;iCode缩进对每个人都有好处。请注意,这几乎不可读。您可以减少可见代码的数量吗?您想知道用于重定向用户的Javascript代码吗?我们似乎都不理解这个问题。
<script type="text/javascript">
var searchString = window.location.search.substring(1);
var i, val;
var params = searchString.replace('?','&').split('&');
var pgsize,pgorder,pdesc,searchstr,catfilter;
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]== "catfilter")
catfilter=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;
}
if(catfilter)
{
document.getElementById('searchstrdiv').innerHTML= document.getElementById('searchstrdiv').innerHTML + '&catfilter=' + catfilter ;
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.SortCatalogue').removeAttr('onchange');
$('.SortCatalogue').change(function() {newURL();});
$('.PageLength').removeAttr('onchange');
$('.PageLength').change(function() {newURL();});
function newURL()
{
var newParams = document.getElementById('listSort') [document.getElementById('listSort').selectedIndex].value + '&' + document.getElementById('listLength') [document.getElementById('listLength').selectedIndex].value.split('?')[1] + document.getElementById('searchstrdiv').innerHTML.replace('amp;','');
var oldPathname = location.pathname;
oldPathname = oldPathname.replace('/desc/','/').replace('/orderby/', '/');
document.location.href = oldPathname + newParams;
}
});
</script>