如何将URL参数传递至另一个URL?(附jQuery解析代码)
嘿,你已经搞定了URL基础解析的部分,接下来要实现参数传递其实很简单,核心就是先提取原URL的查询参数,再把这些参数(或者你指定的部分参数)拼接到目标URL上。我给你一步步拆解实现:
步骤1:完善URL参数解析逻辑
首先,我们可以给你的现有代码加一个工具函数,用来把URL的查询参数转成键值对的对象,这样操作参数会更灵活:
$(document).ready(function () { // 这里可以换成当前页面URL:window.location.href var url = 'http://sitename.com/Manual/module_1_3.htm?param1=value1¶m2=value2'; var a = $('<a>', { href: url }); // 解析URL查询参数的工具函数 function getUrlParams(targetUrl) { const params = {}; const queryString = targetUrl.split('?')[1]; if (queryString) { queryString.split('&').forEach(pair => { const [key, value] = pair.split('='); params[decodeURIComponent(key)] = decodeURIComponent(value || ''); }); } return params; } // 获取原URL的所有参数 const urlParams = getUrlParams(url); // 把解析结果展示到span里(包含参数部分) const sResult = `<b>Protocol:</b> ${a.prop('protocol')}<br/>` + `<b>Host name: </b>${a.prop('hostname')}<br/>` + `<b>Path: </b>${a.prop('pathname')}<br/>` + `<b>Query Params: </b>${JSON.stringify(urlParams)}`; $('span').html(sResult);
步骤2:将参数传递到目标URL
有了解析好的参数,接下来就可以把它们拼接到目标URL上,分两种常见场景:
场景1:传递所有原参数到新URL
如果要把原URL的所有参数都带到目标URL,用这段代码:
// 你的目标URL const targetUrl = 'http://another-site.com/target-page.htm'; let targetUrlWithParams = targetUrl; if (Object.keys(urlParams).length > 0) { // 把参数转成URL格式的字符串 const paramString = Object.entries(urlParams) .map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`) .join('&'); // 判断目标URL本身有没有参数,决定加?还是& targetUrlWithParams += targetUrl.includes('?') ? `&${paramString}` : `?${paramString}`; } console.log('带全参数的目标URL:', targetUrlWithParams); // 要是需要跳转的话,直接用:window.location.href = targetUrlWithParams;
场景2:只传递指定的参数
如果只需要传递部分参数(比如只传param1),可以这样写:
// 挑选你需要传递的参数 const selectedParams = { param1: urlParams.param1 // 只保留param1 }; // 生成指定参数的URL字符串(过滤掉不存在的参数) const selectedParamString = Object.entries(selectedParams) .filter(([key, val]) => val !== undefined) .map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`) .join('&'); const targetUrlWithSelectedParams = targetUrl + (targetUrl.includes('?') ? `&${selectedParamString}` : `?${selectedParamString}`); console.log('带指定参数的目标URL:', targetUrlWithSelectedParams); });
小提示
- 记得用
encodeURIComponent和decodeURIComponent处理参数,避免特殊字符导致URL出错 - 如果你的原URL是当前页面的URL,直接替换成
window.location.href就行,不用硬编码 - 要是想通过页面上的链接跳转,直接把a标签的
href属性设为拼接好的目标URL就可以啦
内容的提问来源于stack exchange,提问作者sforg1




