有勇气的牛排博客
☰

js实现页面跳转与参数获取加载

有勇气的牛排 393 前端 2023-05-18 22:38:00

文章目录

1 页面跳转

location.replace("/search?q=" + keyword);

2 获取请求详细信息

let url = window.location.href; //获取当前窗口的Url;  结果：http://127.0.0.1:8081/search?q=Python
let host = window.location.host;//获取当前窗口的主机名;   结果：127.0.0.1:8081
let port = window.location.port; //获取当前窗口的端口; 结果：8081
let pathname = window.location.pathname;//获取当前窗口的路径 ; 结果：/search
let URL = document.URL;//获取当前文档的Url；结果：http://127.0.0.1:8081/search?q=Python
let search1 = window.location.search;//获取参数；结果：?q=Python
let origin = window.location.origin;//获取来源地址；结果：http://127.0.0.1:8081
let protocol = window.location.protocol;//获取协议；结果：http:

console.log("-------------")
console.log(url)
console.log(host)
console.log(port)
console.log(pathname)
console.log(URL)
console.log(search1)
console.log(origin)
console.log(protocol)

3 获取携带参数

函数

//key(需要检索的键） url（传入的需要分割的url地址，例：?id=2&age=18）
function getSearchString(key, Url) {
	var str = Url;
	str = str.substring(1, str.length); // 获取URL中?之后的字符（去掉第一位的问号）
	// 以&分隔字符串，获得类似name=xiaoli这样的元素数组
	var arr = str.split("&");
	var obj = new Object();
	// 将每一个数组元素以=分隔并赋给obj对象
	for (var i = 0; i < arr.length; i++) {
	    var tmp_arr = arr[i].split("=");
	    obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
	}
	return obj[key];
}

调用

let search = window.location.search;
let q = getSearchString('q', search); //结果：云原生
console.log(q)
$("#keyword").val(q)

参考地址：
https://blog.csdn.net/Neil_clip/article/details/120972562

留言

专栏
文章
加入群聊
程序员兼职接单交流
编程交流