JQ实现网站多条件筛选显示

最新推荐文章于 2025-06-30 09:14:07 发布

原创最新推荐文章于 2025-06-30 09:14:07 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JQ #URL

本文介绍了一个案例筛选系统的实现方式，重点在于如何通过前端JavaScript处理URL中的参数，包括从当前URL获取参数并进行解析，以及点击事件中获取并处理a标签的URL参数，最终实现页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<ul>
<li class="shuaixuan_tiaojian">申请执行人：</li>
<li class="bb"><a href="CaseList.aspx" class="xuanzhong">不限</a></li>
<li class="bb"><a href="CaseList.aspx?executor=0" onclick=" return GetRequest(this);">公司</a></li>
<li class="bb"><a href="CaseList.aspx?executor=1" onclick=" return GetRequest(this)">个人</a></li>
</ul>

Jq处理部分：

//定义两个全集Object变量

theRequest = new Object(); str_Request = new Object();
//获取当前URL中的参数
$(function () {
var URL = window.location.search;//获取当前页面url中"?"符后的字符串
if (URL.indexOf("?") != -1) {
var str = URL.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
str_Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
console.log(str_Request);
}
else { }
})

//获取点击a标签中URL集合
function GetRequest(date) {
var url = date.search; //获取url中"?"符后的字串
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
var baseUrl = 'CaseList.aspx'；//要跳转的页面URL
const obj =$.extend(Object(str_Request), Object(theRequest));//两个几个进行合并
const finalUrl = `${baseUrl}?${encodeSearchParams(obj)}`;//拼接字符串（es6方法）
window.location.href=finalUrl;//链接跳转
return false;
}
else { }
}
</script>

/**
* 拼接对象为请求字符串
* @param {Object} obj - 待拼接的对象
* @returns {string} - 拼接成的请求字符串
*/
function encodeSearchParams(obj) {
const params = []
Object.keys(obj).forEach(function (key) {
let value = obj[key]
// 如果值为undefined我们将其置空
if (typeof value === 'undefined') {
value = ''
}
// 对于需要编码的文本（比如说中文）我们要进行编码
params.push([key, encodeURIComponent(value)].join('='))
})
return params.join('&')
}