在JavaScript中,URL传值通常是通过查询字符串(Query String)来实现的。查询字符串是URL中?
后面的部分,由一系列的key=value
对组成,每对之间用&
分隔。
查询字符串:它是URL的一部分,用于向服务器传递额外的参数信息。例如,在URL http://example.com/page?name=John&age=30
中,name=John&age=30
就是查询字符串。
function getQueryParamByName(name) {
let queryStr = window.location.search.substring(1); // 去除开头的'?'
let paramsArray = queryStr.split('&');
for (let i = 0; i < paramsArray.length; i++) {
let pair = paramsArray[i].split('=');
if (decodeURIComponent(pair[0]) === name) {
return decodeURIComponent(pair[1]);
}
}
return null;
}
// 使用示例
let userName = getQueryParamByName('name');
function buildUrlWithParams(baseUrl, params) {
let queryStr = Object.keys(params)
.map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
.join('&');
return baseUrl + (queryStr ? '?' + queryStr : '');
}
// 使用示例
let baseUrl = 'http://example.com/page';
let params = { name: 'John', age: 30 };
let url = buildUrlWithParams(baseUrl, params);
console.log(url); // 输出: http://example.com/page?name=John&age=30
encodeURIComponent
对参数值进行编码,使用decodeURIComponent
进行解码。通过以上方法,可以有效地在JavaScript中通过URL传递参数,并处理常见的问题。
领取专属 10元无门槛券
手把手带您无忧上云